mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-10-25 18:57:15 +08:00
71 lines
2.2 KiB
Vue
71 lines
2.2 KiB
Vue
<template>
|
|
<template v-if="!item.meta?.hidden">
|
|
<a-menu-item
|
|
v-if="
|
|
isOneShowingChild
|
|
&& (!onlyOneChild?.children || onlyOneChild?.meta?.noShowingChildren)
|
|
&& !item?.meta?.alwaysShow
|
|
"
|
|
v-bind="attrs"
|
|
:key="onlyOneChild?.path"
|
|
>
|
|
<template #icon>
|
|
<MenuIcon
|
|
:svg-icon="onlyOneChild?.meta?.svgIcon || item?.meta?.svgIcon"
|
|
:icon="onlyOneChild?.meta?.icon || item?.meta?.icon"
|
|
/>
|
|
</template>
|
|
<span>{{ onlyOneChild?.meta?.title }}</span>
|
|
</a-menu-item>
|
|
|
|
<a-sub-menu v-else v-bind="attrs" :key="item.path" :title="item?.meta?.title">
|
|
<template #icon>
|
|
<MenuIcon :icon="item?.meta?.icon" />
|
|
</template>
|
|
<MenuItem v-for="child in item.children" :key="child.path" :item="child"></MenuItem>
|
|
</a-sub-menu>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteRecordRaw } from 'vue-router'
|
|
import MenuIcon from './MenuIcon.vue'
|
|
|
|
defineOptions({ name: 'MenuItem' })
|
|
const props = withDefaults(defineProps<Props>(), {})
|
|
|
|
const attrs = useAttrs()
|
|
|
|
interface Props {
|
|
item: RouteRecordRaw
|
|
}
|
|
|
|
// 如果hidden: false那么代表这个路由项显示在左侧菜单栏中
|
|
// 如果props.item的子项chidren只有一个hidden: false的子元素, 那么onlyOneChild就表示这个子元素
|
|
const onlyOneChild = ref<RouteRecordRaw | null>(null)
|
|
const isOneShowingChild = ref(false)
|
|
|
|
const handleFunction = () => {
|
|
const chidrens = props.item?.children?.length ? props.item.children : []
|
|
// 判断是否只有一个显示的子项
|
|
const showingChildrens = chidrens.filter((i) => i.meta?.hidden === false)
|
|
if (showingChildrens.length) {
|
|
// 保存子项最后一个hidden: false的元素
|
|
onlyOneChild.value = showingChildrens[showingChildrens.length - 1]
|
|
}
|
|
|
|
// 当只有一个要显示子路由时, 默认显示该子路由器
|
|
if (showingChildrens.length === 1) {
|
|
isOneShowingChild.value = true
|
|
}
|
|
|
|
// 如果没有要显示的子路由, 则显示父路由
|
|
if (showingChildrens.length === 0) {
|
|
onlyOneChild.value = { ...props.item, meta: { ...props.item.meta, noShowingChildren: true } } as any
|
|
isOneShowingChild.value = true
|
|
}
|
|
}
|
|
|
|
handleFunction()
|
|
</script>
|