80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
||
<component :is="menuComponent" v-if="!item.meta.hidden" :item-or-menu="item">
|
||
<template v-if="item.children && item.children.length">
|
||
<vab-menu
|
||
v-for="route in item.children"
|
||
:key="route.path"
|
||
:item="route"
|
||
/>
|
||
</template>
|
||
</component>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
/* 防止偶发性自动导入失败 */
|
||
import { computed, defineComponent } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { useSettingsStore } from '@/store/modules/settings'
|
||
|
||
const imports = require.context('./components', true, /\.vue$/)
|
||
const Components: {
|
||
[key: string]: any
|
||
} = {}
|
||
imports.keys().forEach((key) => {
|
||
Components[key.replace(/(\/|\.|vue)/g, '')] = imports(key).default
|
||
})
|
||
|
||
export default defineComponent({
|
||
name: 'VabMenu',
|
||
components: Components,
|
||
props: {
|
||
item: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
layout: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
},
|
||
setup(props) {
|
||
const settingsStore = useSettingsStore()
|
||
const { collapse } = storeToRefs(settingsStore)
|
||
|
||
const menuComponent = computed(() =>
|
||
props.item.children &&
|
||
props.item.children.some((_route: any) => {
|
||
return _route.meta.hidden !== true
|
||
})
|
||
? 'VabSubMenu'
|
||
: 'VabMenuItem'
|
||
)
|
||
|
||
return {
|
||
collapse,
|
||
menuComponent,
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.vab-menu-children-height {
|
||
height: 60vh !important;
|
||
overflow-y: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!--由于element-plus
|
||
bug使用teleported=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
|
||
<style lang="scss">
|
||
.el-popper.is-light {
|
||
border: 0 !important;
|
||
}
|
||
</style>
|