<template>
|
<el-menu
|
router
|
:default-active="state.defaultActive"
|
background-color="transparent"
|
:collapse="state.isCollapse"
|
:unique-opened="getThemeConfig.isUniqueOpened"
|
:collapse-transition="false"
|
>
|
<template v-for="val in menuLists">
|
<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>
|
<SubItem :chil="val.children" />
|
</el-sub-menu>
|
<template v-else>
|
<el-menu-item :index="val.path" :key="val.id" @click="menuClick(val)">
|
<SvgIcon :name="val.meta.icon" />
|
<template #title v-if="!judgeIsRealLink(val)">
|
<span style="position: relative">{{ $t(val.meta.title) }}</span>
|
</template>
|
<template #title v-else>
|
<a class="w100">{{ $t(val.meta.title) }}</a>
|
</template>
|
</el-menu-item>
|
</template>
|
</template>
|
</el-menu>
|
</template>
|
|
<script setup lang="ts" name="navMenuVertical">
|
import { storeToRefs } from 'pinia';
|
import { computed, defineAsyncComponent, onMounted, reactive, watch } from 'vue';
|
import type { RouteRecordRaw } from 'vue-router';
|
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
|
import { MOBILE_MIN_WIDTH } from '/@/constants';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import other from '/@/utils/other';
|
|
// 引入组件
|
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
|
// 定义父组件传过来的值
|
const props = defineProps({
|
// 菜单列表
|
menuList: {
|
type: Array<RouteRecordRaw>,
|
default: () => [],
|
},
|
});
|
|
// 定义变量内容
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const route = useRoute();
|
const state = reactive({
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
defaultActive: (route.meta.isDynamic ? route.meta.isDynamicPath : route.path) as string,
|
isCollapse: false,
|
});
|
|
// 获取父级菜单数据
|
const menuLists = computed(() => {
|
const menuList = <RouteItems>props.menuList;
|
return menuList;
|
});
|
// 获取布局配置信息
|
const getThemeConfig = computed(() => {
|
return themeConfig.value;
|
});
|
// 菜单高亮（详情时，父级高亮）
|
const setParentHighlight = (currentRoute: RouteToFrom) => {
|
const { path, meta } = currentRoute;
|
const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
|
|
if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
|
else return path;
|
};
|
|
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 onALinkClick = (val: RouteItem) => {
|
other.handleOpenLink(val);
|
};
|
// 页面加载时
|
onMounted(() => {
|
state.defaultActive = setParentHighlight(route);
|
});
|
// 路由更新时
|
onBeforeRouteUpdate((to) => {
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
state.defaultActive = setParentHighlight(to);
|
const clientWidth = document.body.clientWidth;
|
if (clientWidth < MOBILE_MIN_WIDTH) themeConfig.value.isCollapse = false;
|
});
|
// 设置菜单的收起/展开
|
watch(
|
themeConfig.value,
|
() => {
|
document.body.clientWidth <= MOBILE_MIN_WIDTH ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
|
},
|
{
|
immediate: true,
|
}
|
);
|
</script>
|
|
<style scoped lang="scss">
|
.el-menu--vertical {
|
:deep(.el-sub-menu) {
|
> .el-menu:not(:has(.el-sub-menu)) {
|
> .el-menu-item {
|
span {
|
&:before {
|
content: '';
|
position: absolute;
|
left: -37px;
|
border-left: 1px solid #e1e1e1;
|
height: 51px;
|
}
|
}
|
&.is-active {
|
span:after {
|
content: '';
|
position: absolute;
|
top: 21px;
|
left: -40px;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background-color: #fff;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
