forked from integrated_whb/integrated_whb_vue
71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<template v-for="menu in props.menus" :key="menu.path">
|
||
|
|
<!-- 没有二级导航-->
|
||
|
|
<el-menu-item
|
||
|
|
v-if="fnIsShowMenuItem(menu)"
|
||
|
|
:index="menu.path"
|
||
|
|
:route="{ path: menu.path }"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:is="'icon-application-menu'"
|
||
|
|
theme="filled"
|
||
|
|
fill="#a5b2c2"
|
||
|
|
size="18"
|
||
|
|
:strokeWidth="3"
|
||
|
|
style="margin-right: 15px"
|
||
|
|
/>
|
||
|
|
<span>{{ menu.meta?.title }}</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<!-- 有二级导航-->
|
||
|
|
<el-sub-menu v-else-if="fnIsShowSubmenu(menu)" :index="menu.path">
|
||
|
|
<template #title>
|
||
|
|
<component
|
||
|
|
:is="'icon-application-menu'"
|
||
|
|
theme="filled"
|
||
|
|
fill="#a5b2c2"
|
||
|
|
size="18"
|
||
|
|
:strokeWidth="3"
|
||
|
|
style="margin-right: 15px"
|
||
|
|
/>
|
||
|
|
<span>{{ menu.meta?.title }}</span>
|
||
|
|
</template>
|
||
|
|
<!-- 递归调用当前组件生成导航-->
|
||
|
|
<layout-menu :menus="menu.children" />
|
||
|
|
</el-sub-menu>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
defineOptions({
|
||
|
|
name: "LayoutMenu",
|
||
|
|
});
|
||
|
|
const props = defineProps({
|
||
|
|
menus: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const fnIsShowMenuItem = (menu) => {
|
||
|
|
if (menu.meta?.isMenu === false) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (menu.meta?.isSubMenu === false) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return !menu.children || menu.children.length === 0;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const fnIsShowSubmenu = (menu) => {
|
||
|
|
if (menu.meta?.isMenu === false) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (menu.meta?.isSubMenu === false) {
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return menu.children && menu.children.length > 0;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|