wisdomisitezwfront-web/src/layouts/components/Menu/SubMenu.vue

<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
			<template #title>
				<img :src="activeMenu == subItem.path ? `${subItem.meta.icon}` : `${'un' + subItem.meta.icon}`" />
				<span style="margin-left: 8px">{{ subItem.meta.title }}</span>
			</template>
			<SubMenu :menuList="subItem.children" />
		</el-sub-menu>
		<el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
			<!-- <img :src="`${subItem.meta.icon}`" /> -->
			<img :src="getImageUrl(activeMenu == subItem.path ? subItem.meta.icon : 'un' + subItem.meta.icon)" />
			<template #title>
				<span style="margin-left: 8px">{{ subItem.meta.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();

const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));

function getImageUrl(name: string) {
	return new URL(`../../../assets/images/leftTab/${name}`, import.meta.url).href;
}

defineProps<{ menuList: Menu.MenuOptions[] }>();

const router = useRouter();
// const imgUrl = "/src/assets/images/leftTab/";
const imgUrl = "/src/assets/images/leftTab/";
const baseImgURl = import.meta.env.VITE_BASE_IMAGE_URL;

// const imgUrl = "@/assets/images/leftTab/";
const handleClickMenu = (subItem: Menu.MenuOptions) => {
	if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
	router.push(subItem.path);
};
</script>