[文档] 更新文档菜单

This commit is contained in:
就眠仪式 2021-09-30 13:54:04 +08:00
parent 6c96e9a08a
commit 5e2326031e
7 changed files with 63 additions and 44 deletions

View File

@ -1,22 +1,22 @@
::: demo
<template>
<lay-badge type="dot"></lay-badge>
<lay-badge type="dot" theme="orange"></lay-badge>
<lay-badge type="dot" theme="green"></lay-badge>
<lay-badge type="dot" theme="cyan"></lay-badge>
<lay-badge type="dot" theme="blue"></lay-badge>
<lay-badge type="dot" theme="black"></lay-badge>
<lay-badge type="dot" theme="gray"></lay-badge>
<lay-badge ></lay-badge>
<lay-badge theme="orange"></lay-badge>
<lay-badge theme="green">绿</lay-badge>
<lay-badge theme="cyan"></lay-badge>
<lay-badge theme="blue"></lay-badge>
<lay-badge theme="black"></lay-badge>
<lay-badge theme="gray"></lay-badge>
<lay-badge type="rim">6</lay-badge>
<lay-badge type="rim">Hot</lay-badge>
<lay-badge type="dot"></lay-badge>&nbsp;
<lay-badge type="dot" theme="orange"></lay-badge>&nbsp;
<lay-badge type="dot" theme="green"></lay-badge>&nbsp;
<lay-badge type="dot" theme="cyan"></lay-badge>&nbsp;
<lay-badge type="dot" theme="blue"></lay-badge>&nbsp;
<lay-badge type="dot" theme="black"></lay-badge>&nbsp;
<lay-badge type="dot" theme="gray"></lay-badge>&nbsp;
<lay-badge ></lay-badge>&nbsp;
<lay-badge theme="orange"></lay-badge>&nbsp;
<lay-badge theme="green">绿</lay-badge>&nbsp;
<lay-badge theme="cyan"></lay-badge>&nbsp;
<lay-badge theme="blue"></lay-badge>&nbsp;
<lay-badge theme="black"></lay-badge>&nbsp;
<lay-badge theme="gray"></lay-badge>&nbsp;
<lay-badge type="rim">6</lay-badge>&nbsp;
<lay-badge type="rim">Hot</lay-badge>&nbsp;
</template>
<script>

View File

@ -5,7 +5,7 @@
<lay-menu-item title="首页"></lay-menu-item>
<lay-menu-item title="用户"></lay-menu-item>
<lay-menu-item title="角色"></lay-menu-item>
<lay-menu-item title="目录" class="layui-nav-itemed">
<lay-menu-item title="目录">
<lay-menu-child-item title="菜单一"></lay-menu-child-item>
<lay-menu-child-item title="菜单二"></lay-menu-child-item>
<lay-menu-child-item title="菜单三"></lay-menu-child-item>

View File

@ -45,6 +45,7 @@ export default {
<template>
<lay-timeline>
<lay-timeline-item title="2021年layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2017年layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年layui 孵化" simple></lay-timeline-item>

View File

View File

@ -33,7 +33,12 @@
@click="handleClick(menu)"
>
<div class="layui-menu-body-title">
<router-link :to="menu.path">{{ menu.title }}</router-link>
<router-link :to="menu.path">
<span>{{ menu.title }}</span>
<span class="layui-font-12 layui-font-gray">
{{ menu.subTitle }}
</span>
</router-link>
</div>
</li>
</ul>
@ -55,23 +60,24 @@ export default {
const router = useRouter()
const menus = [
{ id: 1, title: '介绍', path: '/zh-CN/guide' },
{ id: 2, title: '安装', path: '/zh-CN/guide/install' },
{ id: 3, title: '布局', path: '/zh-CN/components/layout' },
{ id: 4, title: '容器', path: '/zh-CN/components/container' },
{ id: 5, title: '按钮', path: '/zh-CN/components/button' },
{ id: 6, title: '图标', path: '/zh-CN/components/icon' },
{ id: 7, title: '面板', path: '/zh-CN/components/panel' },
{ id: 8, title: '卡片', path: '/zh-CN/components/card' },
{ id: 9, title: '动画', path: '/zh-CN/components/animation' },
{ id: 10, title: '栅格', path: '/zh-CN/components/grid' },
{ id: 11, title: '表单', path: '/zh-CN/components/form' },
{ id: 12, title: '徽章', path: '/zh-CN/components/badge' },
{ id: 13, title: '区块', path: '/zh-CN/components/block' },
{ id: 14, title: '分割', path: '/zh-CN/components/line' },
{ id: 15, title: '菜单', path: '/zh-CN/components/menu' },
{ id: 16, title: '进度', path: '/zh-CN/components/progress' },
{ id: 17, title: '时间', path: '/zh-CN/components/timeline' },
{ id: 1, title: '介绍',subTitle:'Getting Started' ,path: '/zh-CN/guide' },
{ id: 2, title: '安装',subTitle:"install" ,path: '/zh-CN/guide/install'},
{ id: 3, title: '更新',subTitle:"changelog" ,path: '/zh-CN/guide/changelog'},
{ id: 4, title: '布局',subTitle:"layout" ,path: '/zh-CN/components/layout' },
{ id: 5, title: '容器',subTitle:"container" ,path: '/zh-CN/components/container' },
{ id: 6, title: '按钮',subTitle:"button" ,path: '/zh-CN/components/button' },
{ id: 7, 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: '表单',subTitle:"form" ,path: '/zh-CN/components/form' },
{ 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: 16, title: '菜单',subTitle:"nav" ,path: '/zh-CN/components/menu' },
{ id: 17, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
{ id: 18, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
]
const selected = ref(1)
@ -99,4 +105,7 @@ export default {
.layui-menu-docs {
padding-top: 10px;
}
.layui-menu-docs .layui-menu-body-title .layui-font-gray {
padding-left: 10px;
}
</style>

View File

@ -16,6 +16,10 @@ const zhCN = [
path: '/zh-CN/guide/install',
component: () => import('../../docs/zh-CN/guide/install.md'),
meta: { title: '安装' },
}, {
path: '/zh-CN/guide/changelog',
component: () => import('../../docs/zh-CN/guide/changelog.md'),
meta: { title: '更新' },
},
],
},

View File

@ -1,17 +1,22 @@
<template>
<li class="layui-nav-item">
<a href="">{{title}}
<i class="layui-icon layui-icon-down layui-nav-more" v-if="slots.default"></i>
</a>
<dl class="layui-nav-child" v-if="slots.default">
<slot></slot>
</dl>
</li>
<li class="layui-nav-item">
<a href="">{{ title }} </a>
</li>
<li class="layui-nav-item" v-if="slots.default">
<a href="">
{{ title }}
<i class="layui-icon layui-icon-down layui-nav-more"></i>
</a>
<dl class="layui-nav-child">
<slot></slot>
</dl>
</li>
</template>
<script setup name="LayMenuItem" lang="ts">
import { defineProps, useSlots } from 'vue'
const slots = useSlots();
const slots = useSlots()
const props =
defineProps<{