266 lines
6.7 KiB
Vue
266 lines
6.7 KiB
Vue
<template>
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
mode="horizontal"
|
|
@select="handleSelect">
|
|
<template v-for="(item, index) in topMenus">
|
|
<el-menu-item
|
|
:style="{ '--theme': theme }"
|
|
:index="item.path"
|
|
:key="index"
|
|
v-if="index < visibleNumber">
|
|
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
|
|
<span class="menu-box" :class="{ active: item.path === currentIndex }">
|
|
<span class="menu-dot"></span>
|
|
{{ item.meta.title }}
|
|
</span>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<!-- 顶部菜单超出数量折叠 -->
|
|
<el-submenu
|
|
:style="{ '--theme': theme }"
|
|
index="more"
|
|
v-if="topMenus.length > visibleNumber">
|
|
<template slot="title">更多菜单</template>
|
|
<template v-for="(item, index) in topMenus">
|
|
<el-menu-item
|
|
:index="item.path"
|
|
:key="index"
|
|
v-if="index >= visibleNumber">
|
|
<!-- <svg-icon :icon-class="item.meta.icon" /> -->
|
|
<span
|
|
class="menu-box"
|
|
:class="{ active: item.path === currentIndex }">
|
|
<span class="menu-dot"></span>
|
|
{{ item.meta.title }}
|
|
</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-submenu>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { constantRoutes } from '@/router';
|
|
|
|
// 隐藏侧边栏路由
|
|
const hideList = ['/index', '/user/profile'];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 顶部栏初始数
|
|
visibleNumber: 5,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['choicepart']),
|
|
currentIndex() {
|
|
return this.choicepart;
|
|
},
|
|
theme() {
|
|
return this.$store.state.settings.theme;
|
|
},
|
|
// 顶部显示菜单
|
|
topMenus() {
|
|
let topMenus = [];
|
|
this.routers.map((menu) => {
|
|
if (menu.hidden !== true) {
|
|
// 兼容顶部栏一级菜单内部跳转
|
|
if (menu.path === '/') {
|
|
topMenus.push(menu.children[0]);
|
|
} else {
|
|
topMenus.push(menu);
|
|
}
|
|
}
|
|
});
|
|
console.log('topMenus:', topMenus);
|
|
return topMenus;
|
|
},
|
|
// 所有的路由信息
|
|
routers() {
|
|
return this.$store.state.permission.topbarRouters;
|
|
},
|
|
// 设置子路由
|
|
childrenMenus() {
|
|
const childrenMenus = [];
|
|
this.routers.map((router) => {
|
|
for (let item in router.children) {
|
|
if (router.children[item].parentPath === undefined) {
|
|
if (router.path === '/') {
|
|
router.children[item].path = '/' + router.children[item].path;
|
|
} else {
|
|
if (!this.ishttp(router.children[item].path)) {
|
|
router.children[item].path =
|
|
router.path + '/' + router.children[item].path;
|
|
}
|
|
}
|
|
router.children[item].parentPath = router.path;
|
|
}
|
|
childrenMenus.push(router.children[item]);
|
|
}
|
|
});
|
|
return constantRoutes.concat(childrenMenus);
|
|
},
|
|
// 默认激活的菜单
|
|
activeMenu() {
|
|
const path = this.$route.path;
|
|
let activePath = path;
|
|
if (
|
|
path !== undefined &&
|
|
path.lastIndexOf('/') > 0 &&
|
|
hideList.indexOf(path) === -1
|
|
) {
|
|
const tmpPath = path.substring(1, path.length);
|
|
activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
|
|
if (!this.$route.meta.link) {
|
|
this.$store.dispatch('app/toggleSideBarHide', false);
|
|
}
|
|
} else if (!this.$route.children) {
|
|
activePath = path;
|
|
this.$store.dispatch('app/toggleSideBarHide', true);
|
|
}
|
|
this.activeRoutes(activePath);
|
|
return activePath;
|
|
},
|
|
},
|
|
beforeMount() {
|
|
window.addEventListener('resize', this.setVisibleNumber);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setVisibleNumber);
|
|
},
|
|
mounted() {
|
|
this.setVisibleNumber();
|
|
},
|
|
methods: {
|
|
// 根据宽度计算设置显示栏数
|
|
setVisibleNumber() {
|
|
const width = window.innerWidth - 700;
|
|
console.log(width);
|
|
console.log('window.innerWidth:', window.innerWidth);
|
|
this.visibleNumber = parseInt(width / 120);
|
|
console.log('this.visibleNumber:', this.visibleNumber);
|
|
},
|
|
// 菜单选择事件
|
|
handleSelect(key, keyPath) {
|
|
// this.currentIndex = key;
|
|
const route = this.routers.find((item) => item.path === key);
|
|
console.log('route:', route);
|
|
this.$store.dispatch('app/setChoicepart', key);
|
|
this.toRouter(route);
|
|
// if (this.ishttp(key)) {
|
|
// // http(s):// 路径新窗口打开
|
|
// window.open(key, '_blank');
|
|
// console.log('aaaaaaaaaaaaaa');
|
|
// } else if (!route || !route.children) {
|
|
// // 没有子路由路径内部打开
|
|
// this.$router.push({ path: key });
|
|
// this.$store.dispatch('app/toggleSideBarHide', true);
|
|
// console.log('bbbbbbbbbbbbbbb');
|
|
// } else {
|
|
// // 显示左侧联动菜单
|
|
// this.activeRoutes(key);
|
|
// if (!this.$route.meta.link) {
|
|
// this.$store.dispatch('app/toggleSideBarHide', false);
|
|
// }
|
|
// console.log('cccccccccccccccc');
|
|
// }
|
|
},
|
|
toRouter(item) {
|
|
console.log(item);
|
|
if (item.children) {
|
|
this.toRouter(item.children[0]);
|
|
} else {
|
|
this.$router.push({ name: item.name });
|
|
}
|
|
},
|
|
// 当前激活的路由
|
|
activeRoutes(key) {
|
|
this.$store.dispatch('app/setChoicepart', key);
|
|
const routes = [];
|
|
if (this.childrenMenus && this.childrenMenus.length > 0) {
|
|
this.childrenMenus.map((item) => {
|
|
if (
|
|
key === item.parentPath ||
|
|
(key === 'index' && '' === item.path)
|
|
) {
|
|
routes.push(item);
|
|
}
|
|
});
|
|
}
|
|
if (routes.length > 0) {
|
|
this.$store.commit('SET_SIDEBAR_ROUTERS', routes);
|
|
} else {
|
|
this.$store.dispatch('app/toggleSideBarHide', true);
|
|
}
|
|
},
|
|
ishttp(url) {
|
|
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.topmenu-container.el-menu.el-menu--horizontal {
|
|
border-bottom: none;
|
|
}
|
|
.topmenu-container.el-menu.el-menu--horizontal > .el-menu-item.is-active {
|
|
border-bottom: none !important;
|
|
}
|
|
.topmenu-container.el-menu.el-menu--horizontal > .el-submenu.is-active {
|
|
--theme: none !important;
|
|
}
|
|
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
|
float: left;
|
|
height: 84px !important;
|
|
line-height: 84px !important;
|
|
color: transparent !important;
|
|
padding: 0 5px !important;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
|
|
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
|
border-bottom: 2px solid #{'var(--theme)'} !important;
|
|
color: #303133;
|
|
}
|
|
|
|
/* submenu item */
|
|
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
float: left;
|
|
height: 84px !important;
|
|
line-height: 89px !important;
|
|
color: #000 !important;
|
|
padding: 0 5px !important;
|
|
margin: 0 10px !important;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.menu-box {
|
|
padding: 7px 15px 9px 15px;
|
|
border-radius: 32px;
|
|
color: #000;
|
|
}
|
|
.active {
|
|
background: #dce7ff;
|
|
.menu-dot {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.menu-dot {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #0b58ff;
|
|
margin-right: 3px;
|
|
margin-bottom: 2px;
|
|
opacity: 0;
|
|
}
|
|
</style>
|