docs: component 文档分类

This commit is contained in:
就眠仪式 2021-10-23 14:14:08 +08:00
parent 4f0e2f2ff9
commit 9a6244dfe8
2 changed files with 319 additions and 252 deletions

View File

@ -1,20 +1,33 @@
<template> <template>
<lay-side> <lay-side>
<ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px"> <ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px">
<li <li
v-for="menu in menus" v-for="menu in menus"
:key="menu" :key="menu"
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']" class="layui-menu-item-group"
@click="handleClick(menu)" lay-options="{type: 'group', isAllowSpread: true}"
> >
<div class="layui-menu-body-title"> <div class="layui-menu-body-title">{{ menu.title }}</div>
<router-link :to="menu.path"> <hr />
<span>{{ menu.title }}</span> <ul>
<span class="layui-font-12 layui-font-gray"> <li
{{ menu.subTitle }} v-for="children in menu.children"
</span> :key="children"
</router-link> :class="[
</div> 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> </li>
</ul> </ul>
</lay-side> </lay-side>
@ -46,232 +59,267 @@ export default {
const menus = [ const menus = [
{ {
id: 4, 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: '布局', title: '布局',
subTitle: 'layout', children: [
path: '/zh-CN/components/layout', {
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: 5, id: 1,
title: '容器', title: '导航',
subTitle: 'container', children: [
path: '/zh-CN/components/container', {
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: 6, id: 1,
title: '按钮', title: '辅助',
subTitle: 'button', children: [
path: '/zh-CN/components/button', {
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: 7, id: 1,
title: '图标',
subTitle: 'iconfont',
path: '/zh-CN/components/icon',
},
{
id: 8,
title: '面板',
subTitle: 'panel',
path: '/zh-CN/components/panel',
},
{
id: 9,
title: '卡片',
subTitle: 'card',
path: '/zh-CN/components/card',
},
{
id: 10,
title: '动画',
subTitle: 'animation',
path: '/zh-CN/components/animation',
},
{
id: 11,
title: '栅格',
subTitle: 'grid',
path: '/zh-CN/components/grid',
},
{
id: 12,
title: '表单', title: '表单',
subTitle: 'form', children: [
path: '/zh-CN/components/form', {
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: 35,
title: '文本域',
subTitle: 'textarea',
path: '/zh-CN/components/textarea',
},
{
id: 36,
title: '开关',
subTitle: 'switch',
path: '/zh-CN/components/switch',
},
{
id: 39,
title: '下拉选择',
subTitle: 'select',
path: '/zh-CN/components/select',
},
{
id: 29,
title: '图标选择',
subTitle: 'iconPicker',
path: '/zh-CN/components/iconPicker',
},
{
id: 40,
title: '颜色选择器',
subTitle: 'colorPicker',
path: '/zh-CN/components/colorPicker',
},
{
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: 13, id: 1,
title: '徽章', title: '展示',
subTitle: 'badge', children: [
path: '/zh-CN/components/badge', {
}, id: 18,
{ title: '进度',
id: 14, subTitle: 'progress',
title: '区块', path: '/zh-CN/components/progress',
subTitle: 'block', },
path: '/zh-CN/components/block', {
}, id: 19,
{ title: '时间线',
id: 15, subTitle: 'timeline',
title: '分割', path: '/zh-CN/components/timeline',
subTitle: 'line', },
path: '/zh-CN/components/line', {
}, id: 21,
{ title: '手风琴',
id: 16, subTitle: 'collapse',
title: '菜单', path: '/zh-CN/components/collapse',
subTitle: 'nav', },
path: '/zh-CN/components/menu', {
}, id: 22,
{ title: '表格',
id: 17, subTitle: 'table',
title: '面包屑', path: '/zh-CN/components/table',
subTitle: 'breadcrumb', },
path: '/zh-CN/components/breadcrumb', {
}, id: 23,
{ title: '头像',
id: 18, subTitle: 'avatar',
title: '进度', path: '/zh-CN/components/avatar',
subTitle: 'progress', },
path: '/zh-CN/components/progress', {
}, id: 25,
{ title: '空',
id: 19, subTitle: 'empty',
title: '时间线', path: '/zh-CN/components/empty',
subTitle: 'timeline', },
path: '/zh-CN/components/timeline', {
}, id: 29,
{ title: '分页',
id: 20, subTitle: 'page',
title: '颜色', path: '/zh-CN/components/page',
subTitle: 'color', },
path: '/zh-CN/components/color', {
}, id: 30,
{ title: '树形组件',
id: 21, subTitle: 'tree',
title: '手风琴', path: '/zh-CN/components/tree',
subTitle: 'collapse', },
path: '/zh-CN/components/collapse', {
}, id: 31,
{ title: '穿梭框',
id: 22, subTitle: 'transfer',
title: '表格', path: '/zh-CN/components/transfer',
subTitle: 'table', },
path: '/zh-CN/components/table', {
}, id: 38,
{ title: '轮播',
id: 23, subTitle: 'carousel',
title: '头像', path: '/zh-CN/components/carousel',
subTitle: 'avatar', },
path: '/zh-CN/components/avatar', ],
},
{
id: 24,
title: '字段',
subTitle: 'field',
path: '/zh-CN/components/field',
},
{
id: 25,
title: '空',
subTitle: 'empty',
path: '/zh-CN/components/empty',
},
{
id: 26,
title: '评分',
subTitle: 'rate',
path: '/zh-CN/components/rate',
},
{
id: 27,
title: '下拉菜单',
subTitle: 'dropdown',
path: '/zh-CN/components/dropdown',
},
{
id: 28,
title: '选项卡',
subTitle: 'tab',
path: '/zh-CN/components/tab',
},
{
id: 29,
title: '图标选择',
subTitle: 'iconPicker',
path: '/zh-CN/components/iconPicker',
},
{
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: 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: 35,
title: '文本域',
subTitle: 'textarea',
path: '/zh-CN/components/textarea',
},
{
id: 36,
title: '开关',
subTitle: 'switch',
path: '/zh-CN/components/switch',
},
{
id: 37,
title: '滑块',
subTitle: 'slider',
path: '/zh-CN/components/slider',
},
{
id: 38,
title: '轮播',
subTitle: 'carousel',
path: '/zh-CN/components/carousel',
},
{
id: 39,
title: '下拉选择',
subTitle: 'select',
path: '/zh-CN/components/select',
},
{
id: 40,
title: '颜色选择器',
subTitle: 'colorPicker',
path: '/zh-CN/components/colorPicker',
}, },
] ]

View File

@ -4,17 +4,30 @@
<li <li
v-for="menu in menus" v-for="menu in menus"
:key="menu" :key="menu"
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']" class="layui-menu-item-group"
@click="handleClick(menu)" lay-options="{type: 'group', isAllowSpread: true}"
> >
<div class="layui-menu-body-title"> <div class="layui-menu-body-title">{{ menu.title }}</div>
<router-link :to="menu.path"> <hr />
<span>{{ menu.title }}</span> <ul>
<span class="layui-font-12 layui-font-gray"> <li
{{ menu.subTitle }} v-for="children in menu.children"
</span> :key="children"
</router-link> :class="[
</div> 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> </li>
</ul> </ul>
</lay-side> </lay-side>
@ -47,21 +60,27 @@ export default {
const menus = [ const menus = [
{ {
id: 1, id: 1,
title: '介绍', title: '基础',
subTitle: 'introduce', children: [
path: '/zh-CN/guide/introduce', {
}, id: 1,
{ title: '介绍',
id: 2, subTitle: 'introduce',
title: '安装', path: '/zh-CN/guide/introduce',
subTitle: 'get started', },
path: '/zh-CN/guide/getStarted', {
}, id: 2,
{ title: '安装',
id: 3, subTitle: 'get started',
title: '更新', path: '/zh-CN/guide/getStarted',
subTitle: 'change log', },
path: '/zh-CN/guide/changelog', {
id: 3,
title: '更新',
subTitle: 'change log',
path: '/zh-CN/guide/changelog',
},
],
} }
] ]