theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'split-panel' of https://gitee.com/dingyongya/layui-vue into develop

Browse Source 
 Conflicts:
	example/docs/zh-CN/components/avatar.md
	example/docs/zh-CN/components/countup.md
This commit is contained in:
dingyongya 2022-01-12 14:20:49 +08:00
commit e9f9457b88
52 changed files with 564 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/docs/zh-CN/components/animation.md
View File

@ -97,4 +97,7 @@ export default {
:::
::: comment
:::
::: previousNext animation
:::

3
example/docs/zh-CN/components/backtop.md
View File

@ -120,3 +120,6 @@ export default {
| default| 自定义内容 |
:::
::: previousNext backtop
:::

3
example/docs/zh-CN/components/badge.md
View File

@ -63,4 +63,7 @@ export default {
:::
::: comment
:::
::: previousNext badge
:::

3
example/docs/zh-CN/components/block.md
View File

@ -62,4 +62,7 @@ export default {
:::
::: comment
:::
::: previousNext block
:::

3
example/docs/zh-CN/components/breadcrumb.md
View File

@ -105,4 +105,7 @@ export default {
:::
::: comment
:::
::: previousNext breadcrumb
:::

3
example/docs/zh-CN/components/button.md
View File

@ -337,3 +337,6 @@ export default {
::: comment
:::
::: previousNext button
:::

3
example/docs/zh-CN/components/card.md
View File

@ -133,4 +133,7 @@ export default {
:::
::: comment
:::
::: previousNext card
:::

3
example/docs/zh-CN/components/carousel.md
View File

@ -144,4 +144,7 @@ export default {
:::
::: comment
:::
::: previousNext carousel
:::

3
example/docs/zh-CN/components/checkbox.md
View File

@ -215,4 +215,7 @@ export default {
:::
::: comment
:::
::: previousNext checkbox
:::

3
example/docs/zh-CN/components/collapse.md
View File

@ -211,4 +211,7 @@ export default {
:::
::: comment
:::
::: previousNext collapse
:::

3
example/docs/zh-CN/components/color.md
View File

@ -165,4 +165,7 @@ export default {
:::
::: comment
:::
::: previousNext color
:::

3
example/docs/zh-CN/components/colorPicker.md
View File

@ -33,4 +33,7 @@ export default {
:::
::: comment
:::
::: previousNext colorPicker
:::

3
example/docs/zh-CN/components/confirm.md
View File

@ -78,4 +78,7 @@ layer.confirm(content, options)
:::
::: comment
:::
::: previousNext confirm
:::

3
example/docs/zh-CN/components/container.md
View File

@ -80,4 +80,7 @@ export default {
:::
::: comment
:::
::: previousNext container
:::

3
example/docs/zh-CN/components/datePicker.md
View File

@ -24,3 +24,6 @@ export default {
</script>
:::
::: previousNext datePicker
:::

3
example/docs/zh-CN/components/dropdown.md
View File

@ -93,4 +93,7 @@ export default {
:::
::: comment
:::
::: previousNext dropdown
:::

3
example/docs/zh-CN/components/empty.md
View File

@ -59,4 +59,7 @@ export default {
:::
::: comment
:::
::: previousNext empty
:::

3
example/docs/zh-CN/components/field.md
View File

@ -76,4 +76,7 @@ export default {
:::
::: comment
:::
::: previousNext field
:::

3
example/docs/zh-CN/components/form.md
View File

@ -581,4 +581,7 @@ export default {
::: comment
:::
::: previousNext form
:::

3
example/docs/zh-CN/components/grid.md
View File

@ -169,4 +169,7 @@ export default {
:::
::: comment
:::
::: previousNext grid
:::

3
example/docs/zh-CN/components/icon.md
View File

@ -1132,4 +1132,7 @@ npm install @layui/icons-vue
:::
::: comment
:::
::: previousNext iconfont
:::

3
example/docs/zh-CN/components/iconPicker.md
View File

@ -115,4 +115,7 @@ export default {
:::
::: comment
:::
::: previousNext iconPicker
:::

3
example/docs/zh-CN/components/input.md
View File

@ -134,4 +134,7 @@ export default {
:::
::: comment
:::
::: previousNext input
:::

3
example/docs/zh-CN/components/inputNumber.md
View File

@ -142,4 +142,7 @@
:::
::: comment
:::
::: previousNext inputNumber
:::

3
example/docs/zh-CN/components/layout.md
View File

@ -189,4 +189,7 @@ export default {
:::
::: comment
:::
::: previousNext layout
:::

3
example/docs/zh-CN/components/line.md
View File

@ -49,4 +49,7 @@ export default {
:::
::: comment
:::
::: previousNext line
:::

3
example/docs/zh-CN/components/load.md
View File

@ -128,4 +128,7 @@ layer.load(load, options)
:::
::: comment
:::
::: previousNext load
:::

3
example/docs/zh-CN/components/menu.md
View File

@ -184,4 +184,7 @@ export default {
:::
::: comment
:::
::: previousNext nav
:::

3
example/docs/zh-CN/components/modal.md
View File

@ -343,4 +343,7 @@ export default {
:::
::: comment
:::
::: previousNext modal
:::

3
example/docs/zh-CN/components/msg.md
View File

@ -96,4 +96,7 @@ layer.msg(content, options)
:::
::: comment
:::
::: previousNext msg
:::

3
example/docs/zh-CN/components/page.md
View File

@ -300,4 +300,7 @@ export default {
:::
::: comment
:::
::: previousNext page
:::

3
example/docs/zh-CN/components/panel.md
View File

@ -36,4 +36,7 @@ export default {
:::
::: comment
:::
::: previousNext panel
:::

3
example/docs/zh-CN/components/progress.md
View File

@ -130,4 +130,7 @@ export default {
:::
::: comment
:::
::: previousNext progress
:::

3
example/docs/zh-CN/components/radio.md
View File

@ -122,4 +122,7 @@ export default {
:::
::: comment
:::
::: previousNext radio
:::

3
example/docs/zh-CN/components/rate.md
View File

@ -310,4 +310,7 @@ export default {
:::
::: comment
:::
::: previousNext rate
:::

3
example/docs/zh-CN/components/select.md
View File

@ -186,4 +186,7 @@ export default {
:::
::: comment
:::
::: previousNext select
:::

3
example/docs/zh-CN/components/skeleton.md
View File

@ -109,4 +109,7 @@ export default {
:::
::: comment
:::
::: previousNext skeleton
:::

3
example/docs/zh-CN/components/slider.md
View File

@ -111,3 +111,6 @@ export default {
::: comment
:::
::: previousNext slider
:::

3
example/docs/zh-CN/components/step.md
View File

@ -470,4 +470,7 @@ export default {
:::
::: comment
:::
::: previousNext step
:::

3
example/docs/zh-CN/components/switch.md
View File

@ -138,4 +138,7 @@ export default {
:::
::: comment
:::
::: previousNext switch
:::

3
example/docs/zh-CN/components/tab.md
View File

@ -248,4 +248,7 @@ export default {
:::
::: comment
:::
::: previousNext tab
:::

3
example/docs/zh-CN/components/table.md
View File

@ -331,3 +331,6 @@ export default {
::: comment
:::
::: previousNext table
:::

3
example/docs/zh-CN/components/textarea.md
View File

@ -113,4 +113,7 @@ export default {
:::
::: comment
:::
::: previousNext textarea
:::

3
example/docs/zh-CN/components/timeline.md
View File

@ -132,4 +132,7 @@ export default {
:::
::: comment
:::
::: previousNext timeline
:::

3
example/docs/zh-CN/components/tooltip.md
View File

@ -130,4 +130,7 @@
:::
::: comment
:::
::: previousNext tooltip
:::

3
example/docs/zh-CN/components/transfer.md
View File

@ -111,4 +111,7 @@ export default {
:::
::: comment
:::
::: previousNext transfer
:::

3
example/docs/zh-CN/components/tree.md
View File

@ -258,4 +258,7 @@ function handleClick(node) {
:::
::: comment
:::
::: previousNext tree
:::

3
example/src/assets/css/markdown.css
View File

@ -261,3 +261,6 @@ body::-webkit-scrollbar {
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
padding-left: 15px;
}
.lay-link:hover{
color: #5FB878;
}

46
example/src/plugin/common-plugins.ts
View File

@ -1,16 +1,17 @@
import vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'
import container from 'markdown-it-container'
import highlight from './highlight'
import snippet from './snippet'
import demo from './demo'
import createTitle from './create-title'
import createBlock from './create-block'
import createDescribe from './create-describe'
import createTable from './create-table'
import createComment from './create-comment'
import createAnchor from './create-anchor'
import preWrapper from './pre-wrapper'
import vue from "@vitejs/plugin-vue";
import Markdown from "vite-plugin-md";
import container from "markdown-it-container";
import highlight from "./highlight";
import snippet from "./snippet";
import demo from "./demo";
import createTitle from "./create-title";
import createBlock from "./create-block";
import createDescribe from "./create-describe";
import createTable from "./create-table";
import createComment from "./create-comment";
import createAnchor from "./create-anchor";
import preWrapper from "./pre-wrapper";
import previousNext from "./previous-next";
const plugins = [
vue({
@ -26,15 +27,16 @@ const plugins = [
markdownItSetup(md) {
md.use(snippet)
.use(preWrapper)
.use(container, 'demo', demo)
.use(...createTable('table', ''))
.use(...createBlock('block', ''))
.use(...createTitle('title', ''))
.use(...createDescribe('describe', ''))
.use(...createComment('comment', ''))
.use(...createAnchor('anchor', ''))
.use(container, "demo", demo)
.use(...createTable("table", ""))
.use(...createBlock("block", ""))
.use(...createTitle("title", ""))
.use(...createDescribe("describe", ""))
.use(...createComment("comment", ""))
.use(...createAnchor("anchor", ""))
.use(...previousNext("previousNext", ""));
},
}),
] as any
] as any;
export default plugins
export default plugins;

55
example/src/plugin/previous-next.ts Normal file
View File

@ -0,0 +1,55 @@
import container from "markdown-it-container";
import type Token from "markdown-it/lib/token";
import menus from "../view/utils/menus";
type ContainerArgs = [
typeof container,
string,
{
render(tokens: Token[], idx: number): string;
}
];
export default function createContainer(
klass: string,
defaultTitle: string
): ContainerArgs {
return [
container,
klass,
{
render(tokens, idx) {
const token = tokens[idx];
const info = token.info.trim().slice(klass.length).trim();
const menusChild = menus.map((item) => item.children).flat(1);
let prevIndex = 0;
let nextIndex = 0;
menusChild.forEach((item, index) => {
if (item.subTitle === info) {
prevIndex = index - 1;
nextIndex = index + 1;
}
});
if (token.nesting === 1) {
return `<div style="display: flex; justify-content: space-between">
<div><router-link to="${
menusChild[prevIndex]?.path
}" class="lay-link" style="display: ${
prevIndex < 0 ? "none" : ""
}"> <lay-icon type="layui-icon-left"/>${
menusChild[prevIndex]?.title
}</router-link></div>
<div><router-link to="${
menusChild[nextIndex]?.path
}" class="lay-link" style="display: ${
nextIndex >= menusChild.length ? "none" : ""
}">${
menusChild[nextIndex]?.title
} <lay-icon type="layui-icon-right"/></router-link> </div>
</div>`;
} else {
return ``;
}
},
},
];
}

334
example/src/view/component.vue
View File

@ -52,6 +52,7 @@
<script>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import menus from "./utils/menus";
export default {
setup() {
const route = useRoute();
@ -69,339 +70,6 @@ export default {
}
);
const menus = [
{
id: 1,
title: "通用",
children: [
{
id: 20,
title: "颜色",
subTitle: "color",
path: "/zh-CN/components/color",
},
{
id: 6,
title: "按钮",
subTitle: "button",
path: "/zh-CN/components/button",
},
{
id: 7,
title: "图标",
subTitle: "iconfont",
path: "/zh-CN/components/icon",
},
{
id: 10,
title: "动画",
subTitle: "animation",
path: "/zh-CN/components/animation",
},
],
},
{
id: 1,
title: "布局",
children: [
{
id: 4,
title: "布局",
subTitle: "layout",
path: "/zh-CN/components/layout",
},
{
id: 5,
title: "容器",
subTitle: "container",
path: "/zh-CN/components/container",
},
{
id: 11,
title: "栅格",
subTitle: "grid",
path: "/zh-CN/components/grid",
},
{
id: 8,
title: "面板",
subTitle: "panel",
path: "/zh-CN/components/panel",
},
{
id: 9,
title: "卡片",
subTitle: "card",
path: "/zh-CN/components/card",
},
{
id: 10,
title: "骨架",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
],
},
{
id: 1,
title: "导航",
children: [
{
id: 16,
title: "菜单",
subTitle: "nav",
path: "/zh-CN/components/menu",
},
{
id: 17,
title: "面包屑",
subTitle: "breadcrumb",
path: "/zh-CN/components/breadcrumb",
},
{
id: 28,
title: "选项卡",
subTitle: "tab",
path: "/zh-CN/components/tab",
},
{
id: 27,
title: "下拉菜单",
subTitle: "dropdown",
path: "/zh-CN/components/dropdown",
},
{
id: 42,
title: "返回顶部",
subTitle: "backtop",
path: "/zh-CN/components/backtop",
},
],
},
{
id: 1,
title: "表单",
children: [
{
id: 36,
title: "开关",
subTitle: "switch",
path: "/zh-CN/components/switch",
},
{
id: 32,
title: "复选框",
subTitle: "checkbox",
path: "/zh-CN/components/checkbox",
},
{
id: 33,
title: "单选框",
subTitle: "radio",
path: "/zh-CN/components/radio",
},
{
id: 34,
title: "输入框",
subTitle: "input",
path: "/zh-CN/components/input",
},
{
id: 341,
title: "数字输入框",
subTitle: "inputNumber",
path: "/zh-CN/components/inputNumber",
},
{
id: 35,
title: "文本域",
subTitle: "textarea",
path: "/zh-CN/components/textarea",
},
{
id: 39,
title: "下拉选择",
subTitle: "select",
path: "/zh-CN/components/select",
},
{
id: 40,
title: "颜色选择器",
subTitle: "colorPicker",
path: "/zh-CN/components/colorPicker",
},
{
id: 29,
title: "图标选择器",
subTitle: "iconPicker",
path: "/zh-CN/components/iconPicker",
},
{
id: 26,
title: "评分",
subTitle: "rate",
path: "/zh-CN/components/rate",
},
{
id: 37,
title: "滑块",
subTitle: "slider",
path: "/zh-CN/components/slider",
},
{
id: 12,
title: "表单",
subTitle: "form",
path: "/zh-CN/components/form",
},
],
},
{
id: 1,
title: "展示",
children: [
{
id: 18,
title: "进度",
subTitle: "progress",
path: "/zh-CN/components/progress",
},
{
id: 19,
title: "时间线",
subTitle: "timeline",
path: "/zh-CN/components/timeline",
},
{
id: 21,
title: "折叠面板",
subTitle: "collapse",
path: "/zh-CN/components/collapse",
},
{
id: 22,
title: "表格",
subTitle: "table",
path: "/zh-CN/components/table",
},
{
id: 23,
title: "头像",
subTitle: "avatar",
path: "/zh-CN/components/avatar",
},
{
id: 25,
title: "空",
subTitle: "empty",
path: "/zh-CN/components/empty",
},
{
id: 29,
title: "分页",
subTitle: "page",
path: "/zh-CN/components/page",
},
{
id: 30,
title: "树形组件",
subTitle: "tree",
path: "/zh-CN/components/tree",
},
{
id: 31,
title: "穿梭框",
subTitle: "transfer",
path: "/zh-CN/components/transfer",
},
{
id: 38,
title: "轮播",
subTitle: "carousel",
path: "/zh-CN/components/carousel",
},
{
id: 43,
title: "数字滚动",
subTitle: "countUp",
path: "/zh-CN/components/countup",
},
],
},
{
id: 1,
title: "辅助",
children: [
{
id: 13,
title: "徽章",
subTitle: "badge",
path: "/zh-CN/components/badge",
},
{
id: 14,
title: "区块",
subTitle: "block",
path: "/zh-CN/components/block",
},
{
id: 15,
title: "分割",
subTitle: "line",
path: "/zh-CN/components/line",
},
{
id: 24,
title: "字段",
subTitle: "field",
path: "/zh-CN/components/field",
},
{
id: 25,
title: "文字提示",
subTitle: "tooltip",
path: "/zh-CN/components/tooltip",
},
{
id: 99,
title: "分步",
subTitle: "step",
path: "/zh-CN/components/step",
},
],
},
{
id: 1,
title: "反馈",
children: [
{
id: 90,
title: "弹层",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
{
id: 91,
title: "加载",
subTitle: "modal",
path: "/zh-CN/components/load",
},
{
id: 92,
title: "询问",
subTitle: "confirm",
path: "/zh-CN/components/confirm",
},
{
id: 93,
title: "消息",
subTitle: "msg",
path: "/zh-CN/components/msg",
},
],
},
];
const selected = ref(1);
const handleClick = function (menu) {

340
example/src/view/utils/menus.ts Normal file
View File

@ -0,0 +1,340 @@
const menus = [
{
id: 1,
title: "通用",
children: [
{
id: 20,
title: "颜色",
subTitle: "color",
path: "/zh-CN/components/color",
},
{
id: 6,
title: "按钮",
subTitle: "button",
path: "/zh-CN/components/button",
},
{
id: 7,
title: "图标",
subTitle: "iconfont",
path: "/zh-CN/components/icon",
},
{
id: 10,
title: "动画",
subTitle: "animation",
path: "/zh-CN/components/animation",
},
],
},
{
id: 1,
title: "布局",
children: [
{
id: 4,
title: "布局",
subTitle: "layout",
path: "/zh-CN/components/layout",
},
{
id: 5,
title: "容器",
subTitle: "container",
path: "/zh-CN/components/container",
},
{
id: 11,
title: "栅格",
subTitle: "grid",
path: "/zh-CN/components/grid",
},
{
id: 8,
title: "面板",
subTitle: "panel",
path: "/zh-CN/components/panel",
},
{
id: 9,
title: "卡片",
subTitle: "card",
path: "/zh-CN/components/card",
},
{
id: 10,
title: "骨架",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
],
},
{
id: 1,
title: "导航",
children: [
{
id: 16,
title: "菜单",
subTitle: "nav",
path: "/zh-CN/components/menu",
},
{
id: 17,
title: "面包屑",
subTitle: "breadcrumb",
path: "/zh-CN/components/breadcrumb",
},
{
id: 28,
title: "选项卡",
subTitle: "tab",
path: "/zh-CN/components/tab",
},
{
id: 27,
title: "下拉菜单",
subTitle: "dropdown",
path: "/zh-CN/components/dropdown",
},
{
id: 42,
title: "返回顶部",
subTitle: "backtop",
path: "/zh-CN/components/backtop",
},
],
},
{
id: 1,
title: "表单",
children: [
{
id: 36,
title: "开关",
subTitle: "switch",
path: "/zh-CN/components/switch",
},
{
id: 32,
title: "复选框",
subTitle: "checkbox",
path: "/zh-CN/components/checkbox",
},
{
id: 33,
title: "单选框",
subTitle: "radio",
path: "/zh-CN/components/radio",
},
{
id: 34,
title: "输入框",
subTitle: "input",
path: "/zh-CN/components/input",
},
{
id: 341,
title: "数字输入框",
subTitle: "inputNumber",
path: "/zh-CN/components/inputNumber",
},
{
id: 35,
title: "文本域",
subTitle: "textarea",
path: "/zh-CN/components/textarea",
},
{
id: 39,
title: "下拉选择",
subTitle: "select",
path: "/zh-CN/components/select",
},
{
id: 40,
title: "颜色选择器",
subTitle: "colorPicker",
path: "/zh-CN/components/colorPicker",
},
{
id: 29,
title: "图标选择器",
subTitle: "iconPicker",
path: "/zh-CN/components/iconPicker",
},
{
id: 26,
title: "评分",
subTitle: "rate",
path: "/zh-CN/components/rate",
},
{
id: 37,
title: "滑块",
subTitle: "slider",
path: "/zh-CN/components/slider",
},
{
id: 12,
title: "表单",
subTitle: "form",
path: "/zh-CN/components/form",
},
],
},
{
id: 1,
title: "展示",
children: [
{
id: 18,
title: "进度",
subTitle: "progress",
path: "/zh-CN/components/progress",
},
{
id: 19,
title: "时间线",
subTitle: "timeline",
path: "/zh-CN/components/timeline",
},
{
id: 21,
title: "折叠面板",
subTitle: "collapse",
path: "/zh-CN/components/collapse",
},
{
id: 22,
title: "表格",
subTitle: "table",
path: "/zh-CN/components/table",
},
{
id: 23,
title: "头像",
subTitle: "avatar",
path: "/zh-CN/components/avatar",
},
{
id: 25,
title: "空",
subTitle: "empty",
path: "/zh-CN/components/empty",
},
{
id: 29,
title: "分页",
subTitle: "page",
path: "/zh-CN/components/page",
},
{
id: 30,
title: "树形组件",
subTitle: "tree",
path: "/zh-CN/components/tree",
},
{
id: 31,
title: "穿梭框",
subTitle: "transfer",
path: "/zh-CN/components/transfer",
},
{
id: 38,
title: "轮播",
subTitle: "carousel",
path: "/zh-CN/components/carousel",
},
{
id: 43,
title: "数字滚动",
subTitle: "countUp",
path: "/zh-CN/components/countup",
},
],
},
{
id: 1,
title: "辅助",
children: [
{
id: 13,
title: "徽章",
subTitle: "badge",
path: "/zh-CN/components/badge",
},
{
id: 14,
title: "区块",
subTitle: "block",
path: "/zh-CN/components/block",
},
{
id: 15,
title: "分割",
subTitle: "line",
path: "/zh-CN/components/line",
},
{
id: 24,
title: "字段",
subTitle: "field",
path: "/zh-CN/components/field",
},
{
id: 25,
title: "文字提示",
subTitle: "tooltip",
path: "/zh-CN/components/tooltip",
},
{
id: 99,
title: "分步",
subTitle: "step",
path: "/zh-CN/components/step",
},
{
id: 100,
title: "分割面板",
subTitle: "splitPanel",
path: "/zh-CN/components/splitPanel",
},
],
},
{
id: 1,
title: "反馈",
children: [
{
id: 90,
title: "弹层",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
{
id: 91,
title: "加载",
subTitle: "load",
path: "/zh-CN/components/load",
},
{
id: 92,
title: "询问",
subTitle: "confirm",
path: "/zh-CN/components/confirm",
},
{
id: 93,
title: "消息",
subTitle: "msg",
path: "/zh-CN/components/msg",
},
],
},
];
export default menus;