<template>
|
<div class="el-menu-horizontal-warp">
|
<el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
|
<!-- 上部菜单，点击跳转至第一个孩子为菜单类型的菜单 -->
|
<el-menu-item v-for="(val, index) in menuLists" :index="val.path" @click="menuClick(val)" :key="val.id">
|
<template #title v-if="!judgeIsRealLink(val)">
|
<SvgIcon :name="val.meta.icon" />
|
{{ $t(val.meta.title) }}
|
</template>
|
<template #title v-else>
|
<a class="w100">
|
<SvgIcon :name="val.meta.icon" />
|
{{ $t(val.meta.title) }}
|
</a>
|
</template>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="navMenuHorizontal">
|
import { defineAsyncComponent, reactive, computed, onBeforeMount, toRaw, watch, onMounted } from 'vue';
|
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
import { storeToRefs } from 'pinia';
|
import { useRoutesList } from '/@/stores/routesList';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import other from '/@/utils/other';
|
import mittBus from '/@/utils/mitt';
|
import { MenuTypeEnum } from '/@/api/menu/type';
|
import { pathMap } from '/@/router/pathMap';
|
|
// 引入组件
|
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
|
// 定义父组件传过来的值
|
const props = defineProps({
|
// 菜单列表
|
menuList: {
|
type: Array<RouteRecordRaw>,
|
default: () => [],
|
},
|
});
|
|
// 定义变量内容
|
const stores = useRoutesList();
|
const storesThemeConfig = useThemeConfig();
|
const { routesList } = storeToRefs(stores);
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const route = useRoute();
|
const state = reactive({
|
defaultActive: '' as string | undefined,
|
});
|
|
// 获取父级菜单数据
|
const menuLists = computed(() => {
|
const menuLists = <RouteItems>props.menuList;
|
|
return menuLists;
|
});
|
// 路由过滤递归函数
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
return arr
|
.filter((item: T) => !item.meta?.isHide)
|
.map((item: T) => {
|
item = Object.assign({}, item);
|
if (item.children) item.children = filterRoutesFun(item.children);
|
return item;
|
});
|
};
|
|
// 传送当前子级数据到菜单中
|
const setSendClassicChildren = (path: string) => {
|
const mapRoute = pathMap.get(path);
|
const mapRouteAny = mapRoute as any;
|
let currentData: MittMenu = { children: [] };
|
let v: any = {};
|
if (mapRoute) {
|
const rootId = mapRouteAny.rootId;
|
const foundRootRoute = filterRoutesFun(routesList.value).find((item) => item.id === rootId);
|
if (foundRootRoute) {
|
v = foundRootRoute;
|
v['k'] = 0;
|
currentData['item'] = { ...v };
|
currentData['children'] = [{ ...v }];
|
// 顶层如果是菜单，需保证 children 中有自己，左侧才会有菜单
|
if (v.children && (v as any).type !== MenuTypeEnum.Menu) currentData['children'] = v.children;
|
}
|
}
|
return currentData;
|
};
|
// 设置页面当前路由高亮
|
const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
|
const { path, meta } = currentRoute;
|
if (themeConfig.value.layout === 'classic') {
|
const mapRoute = pathMap.get(path);
|
if (mapRoute) {
|
const mapRouteAny = mapRoute as any;
|
const rootId = mapRouteAny.rootId;
|
const foundRootRoute = filterRoutesFun(routesList.value).find((item) => item.id === rootId);
|
if (foundRootRoute) {
|
state.defaultActive = foundRootRoute.path || foundRootRoute.id;
|
return;
|
}
|
} else {
|
state.defaultActive = undefined;
|
}
|
} else {
|
const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
|
if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
|
else state.defaultActive = 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);
|
}
|
};
|
// 页面加载前
|
onBeforeMount(() => {
|
setCurrentRouterHighlight(route);
|
});
|
// 路由更新时
|
onBeforeRouteUpdate((to) => {
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
setCurrentRouterHighlight(to);
|
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
if (layout === 'classic' && isClassicSplitMenu) {
|
mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.el-menu-horizontal-warp {
|
flex: 1;
|
overflow: hidden;
|
margin-right: 30px;
|
:deep(.el-scrollbar__bar.is-vertical) {
|
display: none;
|
}
|
:deep(a) {
|
width: 100%;
|
}
|
.el-menu.el-menu--horizontal {
|
display: flex;
|
height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
