73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
|
<n-menu
|
|
:mode="menuMode"
|
|
:value="(currentRoute.title && currentRoute.meta.activeMenu) || currentRoute.title"
|
|
:options="getMenuOptions"
|
|
@update:value="handleMenuSelect"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { computed, defineProps, toRaw } from 'vue'
|
|
import { isExternal } from '@/utils/is.js'
|
|
import { usePermissionStore } from '@/store/modules/permission'
|
|
|
|
const props = defineProps({
|
|
menuMode: {
|
|
type: String,
|
|
default: 'vertical'
|
|
}
|
|
})
|
|
|
|
const menuMode = toRaw(props.menuMode)
|
|
|
|
const router = useRouter()
|
|
const { currentRoute } = router
|
|
const permissionStore = usePermissionStore()
|
|
const getMenuOptions = computed(() => {
|
|
return generateOptions(permissionStore.routes, '')
|
|
})
|
|
|
|
function resolvePath(basePath, path) {
|
|
if (isExternal(path)) return path
|
|
return (
|
|
'/' +
|
|
[basePath, path]
|
|
.filter((path) => !!path && path !== '/')
|
|
.map((path) => path.replace(/(^\/)|(\/$)/g, ''))
|
|
.join('/')
|
|
)
|
|
}
|
|
|
|
function generateOptions(routes, basePath) {
|
|
// console.log('routes', routes)
|
|
const options = []
|
|
routes.forEach((route) => {
|
|
if (route.title && !route.isHidden) {
|
|
const curOption = {
|
|
label: (route.meta && route.meta.title) || route.title,
|
|
key: route.title,
|
|
path: resolvePath(basePath, route.path)
|
|
}
|
|
if (route.children && route.children.length) {
|
|
curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
|
|
}
|
|
options.push(curOption)
|
|
}
|
|
})
|
|
return options
|
|
}
|
|
|
|
function handleMenuSelect(key, item) {
|
|
if (isExternal(item.path)) {
|
|
window.open(item.path)
|
|
} else {
|
|
router.push(item.path)
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
</style>
|