<template>
|
<template v-for="val in chils">
|
<!-- 目录没有 path，用 id 替代 -->
|
<el-sub-menu
|
:index="val.path"
|
v-if="val.children && val.children.length > 0"
|
:key="val.id"
|
>
|
<template #title>
|
<SvgIcon :name="val.meta.icon" />
|
<span style="position: relative">{{ $t(val.meta.title) }}</span>
|
</template>
|
<sub-item :chil="val.children" />
|
</el-sub-menu>
|
<template v-else>
|
<el-menu-item :index="val.path" :key="val.id" @click="menuClick(val)">
|
<template v-if="!judgeIsRealLink(val)">
|
<SvgIcon :name="val.meta.icon" />
|
<span style="position: relative">{{ $t(val.meta.title) }}</span>
|
</template>
|
<template v-else>
|
<a class="w100">
|
<SvgIcon :name="val.meta.icon" />
|
{{ $t(val.meta.title) }}
|
</a>
|
</template>
|
</el-menu-item>
|
</template>
|
</template>
|
</template>
|
|
<script setup lang="ts" name="navMenuSubItem">
|
import { computed } from 'vue';
|
import { RouteRecordRaw } from 'vue-router';
|
import other from '/@/utils/other';
|
import { MenuTypeEnum } from '/@/api/menu/type';
|
|
// 定义父组件传过来的值
|
const props = defineProps({
|
// 菜单列表
|
chil: {
|
type: Array<RouteRecordRaw>,
|
default: () => [],
|
},
|
});
|
const judgeIsRealLink = (val: RouteItem) => {
|
return val.meta.isLink && !(val.meta.isLink && val.meta.isIframe);
|
};
|
const menuClick = (val: RouteItem) => {
|
if (judgeIsRealLink(val)) {
|
other.handleOpenLink(val);
|
}
|
};
|
// 获取父级菜单数据
|
const chils = computed(() => {
|
return <RouteItems>props.chil;
|
});
|
// 打开外部链接
|
const onALinkClick = (val: RouteItem) => {
|
other.handleOpenLink(val);
|
};
|
</script>
|
