84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
|
<template v-for="menu in props.menus" :key="menu.path">
|
|
<!-- 没有二级导航-->
|
|
<el-menu-item
|
|
v-if="fnIsShowMenuItem(menu)"
|
|
:index="fnMenuItemIndex(menu)"
|
|
:route="fnMenuItemRoute(menu)"
|
|
@click="resetQueryCriteria"
|
|
>
|
|
<component
|
|
:is="'icon-' + menu.meta?.icon"
|
|
v-if="menu.meta?.icon"
|
|
theme="filled"
|
|
fill="#a5b2c2"
|
|
size="18"
|
|
:stroke-width="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-' + menu.meta?.icon"
|
|
v-if="menu.meta?.icon"
|
|
theme="filled"
|
|
fill="#bfcbd9"
|
|
size="18"
|
|
:stroke-width="3"
|
|
style="margin-right: 10px"
|
|
/>
|
|
<span>{{ menu.meta?.title }}</span>
|
|
</template>
|
|
<!-- 递归调用当前组件生成导航-->
|
|
<layout-menu :menus="menu.children" />
|
|
</el-sub-menu>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { resetQueryCriteria } from "../../hooks/useQueryCriteria/index.js";
|
|
import { ElMenuItem, ElSubMenu } from 'element-plus'
|
|
import "element-plus/es/components/menu-item/style/css";
|
|
import "element-plus/es/components/sub-menu/style/css";
|
|
|
|
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;
|
|
}
|
|
};
|
|
const fnMenuItemIndex = (menu) => {
|
|
if (menu.name && menu.props) return menu.name;
|
|
return menu.path;
|
|
};
|
|
const fnMenuItemRoute = (menu) => {
|
|
if (menu.name && menu.props) return { name: menu.name };
|
|
return { path: menu.path };
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|