101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
<template>
|
||
<a-menu class="czhj-menu" :mode="mode" :inlineIndent="inlineIndent" @click="clickMenu" @openChange="handleOpenChange" :openKeys="openKeys" :selectedKeys="urlToList($route.path)" v-bind="$attrs">
|
||
<sidebar-item v-for="route in sideMenuData" :menuItem="route" :key="route.path" :isLimitLevel="isLimitLevel" :base-path="basePath" :default-icon="defaultIcon"></sidebar-item>
|
||
</a-menu>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { computed, defineComponent } from 'vue'
|
||
import SidebarItem from './SidebarItem.vue'
|
||
import { urlToList } from './utils'
|
||
import { useLink } from './useLink'
|
||
import useOpenKeys from './useOpenKeys'
|
||
|
||
export default defineComponent({
|
||
components: { SidebarItem },
|
||
props: {
|
||
mode: {
|
||
type: String,
|
||
default: 'vertical'
|
||
},
|
||
menuData: {
|
||
type: Array
|
||
},
|
||
isCollapsed: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
mainMenu: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
inlineIndent: {
|
||
type: Number,
|
||
default: 12
|
||
},
|
||
isLimitLevel: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
limitLevel: {
|
||
type: Number,
|
||
default: 4
|
||
},
|
||
basePath: {
|
||
type: String,
|
||
default: '/'
|
||
},
|
||
defaultIcon: {
|
||
type: String,
|
||
default: 'svg-dot'
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
// 对菜单数据做过滤，去掉隐藏菜单
|
||
function filterMenuData(data: any) {
|
||
const menu: any[] = []
|
||
data.forEach((item: any) => {
|
||
if (!item.hidden) {
|
||
const cache = { ...item }
|
||
menu.push(cache)
|
||
if (item.children && item.path.split('/').length < props.limitLevel + 1) {
|
||
cache.children = filterMenuData(item.children)
|
||
} else {
|
||
cache.children = null
|
||
}
|
||
}
|
||
})
|
||
return menu.length ? menu : null
|
||
}
|
||
const sideMenuData = computed(() => filterMenuData(props.menuData))
|
||
// 菜单展示
|
||
const { openKeys, handleOpenChange } = useOpenKeys({
|
||
mainMenu: props.mainMenu
|
||
})
|
||
// 界面跳转
|
||
const goPage = useLink()
|
||
function clickMenu({ key }: { key: string }) {
|
||
goPage(key)
|
||
}
|
||
return {
|
||
sideMenuData,
|
||
clickMenu,
|
||
urlToList,
|
||
openKeys,
|
||
handleOpenChange
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.czhj-menu {
|
||
background: var(--czhj-color-background);
|
||
color: var(--czhj-color-text);
|
||
border-right: none;
|
||
height: 100%;
|
||
::v-deep(.ant-menu-submenu-arrow) {
|
||
color: var(--czhj-color-text);
|
||
}
|
||
}
|
||
</style>
|