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>
|