<template>
|
<template v-for="subItem in menuList" :key="subItem.path">
|
<el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
|
<template #title>
|
<i v-if="subItem.meta.icon" :class="'ri-' + subItem.meta.icon" style="margin-right: 8px; font-size: 1.2em" />
|
<span class="sle">{{ getMenuTitle(subItem) }}</span>
|
</template>
|
<SubMenu :menu-list="subItem.children" />
|
</el-sub-menu>
|
<el-menu-item
|
v-else
|
:index="subItem.path"
|
style="width: 90%; height: 50px; margin: auto; border-radius: 5px"
|
@click="handleClickMenu(subItem)"
|
>
|
<i v-if="subItem.meta.icon" :class="'ri-' + subItem.meta.icon" style="margin-right: 8px; font-size: 1.2em" />
|
<template #title>
|
<span class="sle">{{ getMenuTitle(subItem) }}</span>
|
</template>
|
</el-menu-item>
|
</template>
|
</template>
|
|
<script setup lang="ts">
|
import { useRouter } from "vue-router";
|
|
import { computed } from "vue";
|
import { useGlobalStore } from "@/stores/modules/global";
|
|
defineProps<{ menuList: Menu.MenuOptions[] }>();
|
|
const globalStore = useGlobalStore();
|
const router = useRouter();
|
|
// 获取当前语言
|
const currentLanguage = computed(() => globalStore.language);
|
|
// 根据当前语言获取菜单标题
|
const getMenuTitle = (subItem: Menu.MenuOptions) => {
|
// 如果是英文且存在英文标题，则使用英文标题
|
if (currentLanguage.value === "en" && subItem.meta.entitle) {
|
return subItem.meta.entitle;
|
}
|
// 否则使用默认标题
|
return subItem.meta.title;
|
};
|
|
const handleClickMenu = (subItem: Menu.MenuOptions) => {
|
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
|
router.push(subItem.path);
|
};
|
</script>
|
|
<style lang="scss">
|
.el-sub-menu .el-sub-menu__title:hover {
|
color: var(--el-menu-hover-text-color) !important;
|
background-color: transparent !important;
|
}
|
.el-menu--collapse {
|
.is-active {
|
.el-sub-menu__title {
|
color: #ffffff !important;
|
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;
|
background-color: var(--el-menu-active-bg-color) !important;
|
&::before {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
width: 4px;
|
content: "";
|
|
// background-color: var(--el-color-primary);
|
}
|
}
|
}
|
.vertical,
|
.classic,
|
.transverse {
|
.el-menu-item {
|
&.is-active {
|
&::before {
|
left: 0;
|
}
|
}
|
}
|
}
|
.columns {
|
.el-menu-item {
|
&.is-active {
|
&::before {
|
right: 0;
|
}
|
}
|
}
|
}
|
</style>
|
