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}`" style="width: 14px" /> -->
				<img :src="getImageUrl(activeMenu == subItem.path ? subItem.meta.icon : 'un' + subItem.meta.icon)" style="width: 14px" />
				<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)" style="width: 14px" />
			<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";
import { getButtonAuth } from "@/api/modules/auth";
import { GlobalStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
const authStore = AuthStore();
const route = useRoute();
const globalStore = GlobalStore();

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

function getImageUrl(name: string) {
	return new URL(`../../../assets/images/leftTab/${name}` + ".png", 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 = async (subItem: Menu.MenuOptions) => {
	if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
	if (globalStore.accountType != 1) {
		const res = await getButtonAuth({ menuId: subItem.name });
		if (res && res.result) {
			authStore.authButtonList = res.result;
		}
	}
	router.push(subItem.path);
};
</script>