mirror of
https://github.com/zclzone/vue-naive-admin.git
synced 2025-05-01 06:39:01 +08:00
63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<!--------------------------------
|
|
- @Author: Ronnie Zhang
|
|
- @LastEditor: Ronnie Zhang
|
|
- @LastEditTime: 2023/12/05 21:24:02
|
|
- @Email: zclzone@outlook.com
|
|
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
|
--------------------------------->
|
|
|
|
<template>
|
|
<n-menu
|
|
ref="menu"
|
|
class="side-menu"
|
|
accordion
|
|
:indent="18"
|
|
:collapsed-icon-size="22"
|
|
:collapsed-width="64"
|
|
:collapsed="appStore.collapsed"
|
|
:options="permissionStore.menus"
|
|
:value="activeKey"
|
|
@update:value="handleMenuSelect"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAppStore, usePermissionStore } from '@/store'
|
|
import { isExternal } from '@/utils'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const appStore = useAppStore()
|
|
const permissionStore = usePermissionStore()
|
|
|
|
const activeKey = computed(() => route.meta?.parentKey || route.name)
|
|
|
|
const menu = ref(null)
|
|
watch(route, async () => {
|
|
await nextTick()
|
|
menu.value?.showOption()
|
|
})
|
|
|
|
function handleMenuSelect(key, item) {
|
|
if (isExternal(item.path)) {
|
|
window.open(item.path)
|
|
} else {
|
|
router.push(item.path)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.side-menu:not(.n-menu--collapsed) {
|
|
.n-menu-item-content {
|
|
&::before {
|
|
left: 8px;
|
|
right: 8px;
|
|
}
|
|
&.n-menu-item-content--selected::before {
|
|
border-left: 4px solid var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
</style>
|