83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<lay-side>
|
||
|
|
<ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px">
|
||
|
|
<li
|
||
|
|
v-for="menu in menus"
|
||
|
|
:key="menu"
|
||
|
|
:class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
|
||
|
|
@click="handleClick(menu)"
|
||
|
|
>
|
||
|
|
<div class="layui-menu-body-title">
|
||
|
|
<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>
|
||
|
|
</lay-side>
|
||
|
|
<lay-body>
|
||
|
|
<div style="padding: 20px">
|
||
|
|
<router-view />
|
||
|
|
</div>
|
||
|
|
</lay-body>
|
||
|
|
</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: '介绍',
|
||
|
|
subTitle: 'introduce',
|
||
|
|
path: '/zh-CN/guide/introduce',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: '安装',
|
||
|
|
subTitle: 'get started',
|
||
|
|
path: '/zh-CN/guide/getStarted',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: '更新',
|
||
|
|
subTitle: 'change log',
|
||
|
|
path: '/zh-CN/guide/changelog',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const selected = ref(1)
|
||
|
|
|
||
|
|
const handleClick = function (menu) {
|
||
|
|
selected.value = menu.id
|
||
|
|
router.push(menu.path)
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
menus,
|
||
|
|
selected,
|
||
|
|
currentPath,
|
||
|
|
handleClick,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|