[文档] 新增顶部选择
This commit is contained in:
就眠仪式
@@ -5,6 +5,14 @@
|
||||
<lay-logo>
|
||||
<img src="../assets/logo.png" />
|
||||
</lay-logo>
|
||||
<ul
|
||||
class="layui-nav layui-layout-left"
|
||||
style="margin-top: 10px; margin-bottom: 0px"
|
||||
>
|
||||
<lay-form>
|
||||
<lay-search :datas="menus"></lay-search>
|
||||
</lay-form>
|
||||
</ul>
|
||||
<ul
|
||||
class="layui-nav layui-layout-right"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
@@ -29,7 +37,7 @@
|
||||
<li
|
||||
:key="menu"
|
||||
v-for="menu in menus"
|
||||
:class="[selected === menu.id ? 'layui-menu-item-checked2' : '']"
|
||||
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
@@ -52,41 +60,190 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const currentPath = ref("hahaha")
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(newValue, oldValue) => {
|
||||
currentPath.value = route.path
|
||||
}
|
||||
)
|
||||
|
||||
const menus = [
|
||||
{ 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:"breadcrumb" ,path: '/zh-CN/components/breadcrumb' },
|
||||
{ id: 18, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
|
||||
{ id: 19, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
|
||||
{ id: 20, title: '颜色',subTitle:"color" ,path: '/zh-CN/components/color' },
|
||||
{ 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: 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: 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: 'breadcrumb',
|
||||
path: '/zh-CN/components/breadcrumb',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: '进度',
|
||||
subTitle: 'progress',
|
||||
path: '/zh-CN/components/progress',
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: '时间线',
|
||||
subTitle: 'timeline',
|
||||
path: '/zh-CN/components/timeline',
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: '颜色',
|
||||
subTitle: 'color',
|
||||
path: '/zh-CN/components/color',
|
||||
},
|
||||
{
|
||||
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: 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',
|
||||
},
|
||||
]
|
||||
|
||||
const selected = ref(1)
|
||||
@@ -99,6 +256,7 @@ export default {
|
||||
return {
|
||||
menus,
|
||||
selected,
|
||||
currentPath,
|
||||
handleClick,
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user