421 lines
9.9 KiB
Vue
421 lines
9.9 KiB
Vue
<template>
|
|
<lay-layout>
|
|
<lay-side>
|
|
<lay-scroll style="overflow-y: scroll">
|
|
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
|
<li
|
|
v-for="menu in menus"
|
|
:key="menu"
|
|
class="layui-menu-item-group"
|
|
lay-options="{type: 'group', isAllowSpread: true}"
|
|
>
|
|
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
|
<hr />
|
|
<ul>
|
|
<li
|
|
v-for="children in menu.children"
|
|
:key="children"
|
|
:class="[
|
|
currentPath === children.path
|
|
? 'layui-menu-item-checked2'
|
|
: '',
|
|
]"
|
|
@click="handleClick(children)"
|
|
>
|
|
<div class="layui-menu-body-title">
|
|
<router-link :to="children.path">
|
|
<span>{{ children.title }}</span>
|
|
<span class="layui-font-12 layui-font-gray">
|
|
{{ children.subTitle }}
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</lay-scroll>
|
|
</lay-side>
|
|
<lay-body>
|
|
<div
|
|
style="
|
|
padding: 20px;
|
|
margin-right: 180px;
|
|
transition: margin 240ms 60ms;
|
|
"
|
|
>
|
|
<router-view />
|
|
</div>
|
|
</lay-body>
|
|
</lay-layout>
|
|
</template>
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const currentPath = ref("/zh-CN/guide");
|
|
|
|
watch(
|
|
() => route.path,
|
|
(val) => {
|
|
currentPath.value = val;
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
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) {
|
|
selected.value = menu.id;
|
|
router.push(menu.path);
|
|
};
|
|
|
|
return {
|
|
menus,
|
|
selected,
|
|
currentPath,
|
|
handleClick,
|
|
};
|
|
},
|
|
};
|
|
</script>
|