aizuda-web-vue3/src/layout/components/Menu/SubMenu.vue

<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<el-sub-menu v-if="subItem.children?.length" teleported popper-class="layout-menu-popper-wrap" :index="subItem.path">
			<template #title>
				<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
				<!--				<el-icon v-if="subItem.meta.icon">
					<component :is="subItem.meta.icon" />
				</el-icon>-->
				<span class="sle">{{ generateTitle(subItem.meta?.title) }}</span>
			</template>
			<SubMenu :menu-list="subItem.children" />
		</el-sub-menu>
		<el-menu-item v-else popper-class="layout-menu-popper-wrap" :index="subItem.path" @click="handleClickMenu(subItem)">
			<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
			<!--      <el-icon>
				<component :is="subItem.meta.icon"></component>
			</el-icon>-->
			<template #title>
				<span class="sle">{{ generateTitle(subItem.meta?.title) }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { generateTitle } from '@/utils/i18n'
import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
import { isExternal } from '@/utils/validate'
import { ElMessage } from 'element-plus'

defineProps<{ menuList: RouteMenu.Item[] }>()

const router = useRouter()

/**
 * 1、在此判断是否是外链 subItem.meta.type === 'iframe'
 *    是外链，则直接跳转（先不考虑在框架中打开外链）
 *    否则跳转路由
 * @param subItem
 */
const handleClickMenu = (subItem: RouteMenu.Item) => {
	const { type } = subItem.meta
	const isIframe = ['iframe', 'link'].includes(type) // true 外链 false 系统路由
	if (!isIframe) {
		router.push(subItem.path)
	} else {
		if (!isExternal(subItem.props.url)) return ElMessage.error(`当前Url不是外链地址，请检查重定向配置~`)
		if (type === 'link') {
			return window.open(subItem.redirect, '_blank')
		} else {
			router.push({ path: `${subItem.path}` })
		}
	}
}
</script>

<style lang="scss">
.el-menu--collapse {
	.el-sub-menu__title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.is-active {
		.el-sub-menu__title {
			&::before {
				background-color: var(--el-color-primary) !important;
			}
		}
	}
}
.el-menu-item {
	/*&:hover {
		color: var(--el-menu-hover-text-color);
	}*/
	&.is-active {
		color: var(--el-menu-active-color) !important;
	}
}
</style>