|
|
@ -5,7 +5,7 @@
|
|
|
|
@select="handleSelect"
|
|
|
|
@select="handleSelect"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template v-for="(item, index) in topMenus">
|
|
|
|
<template v-for="(item, index) in topMenus">
|
|
|
|
<el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
|
|
|
|
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
|
|
|
|
><svg-icon :icon-class="item.meta.icon" />
|
|
|
|
><svg-icon :icon-class="item.meta.icon" />
|
|
|
|
{{ item.meta.title }}</el-menu-item
|
|
|
|
{{ item.meta.title }}</el-menu-item
|
|
|
|
>
|
|
|
|
>
|
|
|
@ -37,15 +37,28 @@ export default {
|
|
|
|
visibleNumber: 5,
|
|
|
|
visibleNumber: 5,
|
|
|
|
// 是否为首次加载
|
|
|
|
// 是否为首次加载
|
|
|
|
isFrist: false,
|
|
|
|
isFrist: false,
|
|
|
|
|
|
|
|
// 当前激活菜单的 index
|
|
|
|
|
|
|
|
currentIndex: undefined
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
theme() {
|
|
|
|
|
|
|
|
return this.$store.state.settings.theme;
|
|
|
|
|
|
|
|
},
|
|
|
|
// 顶部显示菜单
|
|
|
|
// 顶部显示菜单
|
|
|
|
topMenus() {
|
|
|
|
topMenus() {
|
|
|
|
return this.routers.map((menu) => ({
|
|
|
|
let topMenus = [];
|
|
|
|
...menu,
|
|
|
|
this.routers.map((menu) => {
|
|
|
|
children: undefined,
|
|
|
|
if (menu.hidden !== true) {
|
|
|
|
}));
|
|
|
|
// 兼容顶部栏一级菜单内部跳转
|
|
|
|
|
|
|
|
if (menu.path === "/") {
|
|
|
|
|
|
|
|
topMenus.push(menu.children[0]);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
topMenus.push(menu);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return topMenus;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 所有的路由信息
|
|
|
|
// 所有的路由信息
|
|
|
|
routers() {
|
|
|
|
routers() {
|
|
|
@ -57,7 +70,11 @@ export default {
|
|
|
|
this.routers.map((router) => {
|
|
|
|
this.routers.map((router) => {
|
|
|
|
for (var item in router.children) {
|
|
|
|
for (var item in router.children) {
|
|
|
|
if (router.children[item].parentPath === undefined) {
|
|
|
|
if (router.children[item].parentPath === undefined) {
|
|
|
|
router.children[item].path = router.path + "/" + router.children[item].path;
|
|
|
|
if(router.path === "/") {
|
|
|
|
|
|
|
|
router.children[item].path = "/redirect/" + router.children[item].path;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
router.children[item].path = router.path + "/" + router.children[item].path;
|
|
|
|
|
|
|
|
}
|
|
|
|
router.children[item].parentPath = router.path;
|
|
|
|
router.children[item].parentPath = router.path;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
childrenMenus.push(router.children[item]);
|
|
|
|
childrenMenus.push(router.children[item]);
|
|
|
@ -79,32 +96,40 @@ export default {
|
|
|
|
activePath = "index";
|
|
|
|
activePath = "index";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.activeRoutes(activePath);
|
|
|
|
var routes = this.activeRoutes(activePath);
|
|
|
|
|
|
|
|
if (routes.length === 0) {
|
|
|
|
|
|
|
|
activePath = this.currentIndex || this.routers[0].path
|
|
|
|
|
|
|
|
this.activeRoutes(activePath);
|
|
|
|
|
|
|
|
}
|
|
|
|
return activePath;
|
|
|
|
return activePath;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeMount() {
|
|
|
|
|
|
|
|
window.addEventListener('resize', this.setVisibleNumber)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
|
|
window.removeEventListener('resize', this.setVisibleNumber)
|
|
|
|
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.setVisibleNumber();
|
|
|
|
this.setVisibleNumber();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
// 根据宽度计算设置显示栏数
|
|
|
|
// 根据宽度计算设置显示栏数
|
|
|
|
setVisibleNumber() {
|
|
|
|
setVisibleNumber() {
|
|
|
|
const width = document.body.getBoundingClientRect().width - 200;
|
|
|
|
const width = document.body.getBoundingClientRect().width / 3;
|
|
|
|
const elWidth = this.$el.getBoundingClientRect().width;
|
|
|
|
this.visibleNumber = parseInt(width / 85);
|
|
|
|
const menuItemNodes = this.$el.children;
|
|
|
|
|
|
|
|
const menuWidth = Array.from(menuItemNodes).map(
|
|
|
|
|
|
|
|
(i) => i.getBoundingClientRect().width
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
this.visibleNumber = (
|
|
|
|
|
|
|
|
parseInt(width - elWidth) / parseInt(menuWidth)
|
|
|
|
|
|
|
|
).toFixed(0);
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 菜单选择事件
|
|
|
|
// 菜单选择事件
|
|
|
|
handleSelect(key, keyPath) {
|
|
|
|
handleSelect(key, keyPath) {
|
|
|
|
|
|
|
|
this.currentIndex = key;
|
|
|
|
if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
|
|
|
|
if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
|
|
|
|
// http(s):// 路径新窗口打开
|
|
|
|
// http(s):// 路径新窗口打开
|
|
|
|
window.open(key, "_blank");
|
|
|
|
window.open(key, "_blank");
|
|
|
|
|
|
|
|
} else if (key.indexOf("/redirect") !== -1) {
|
|
|
|
|
|
|
|
// /redirect 路径内部打开
|
|
|
|
|
|
|
|
this.$router.push({ path: key.replace("/redirect", "") });
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 显示左侧联动菜单
|
|
|
|
this.activeRoutes(key);
|
|
|
|
this.activeRoutes(key);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -118,13 +143,16 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
|
|
|
|
if(routes.length > 0) {
|
|
|
|
},
|
|
|
|
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return routes;
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss">
|
|
|
|
.el-menu--horizontal > .el-menu-item {
|
|
|
|
.el-menu--horizontal > .el-menu-item {
|
|
|
|
float: left;
|
|
|
|
float: left;
|
|
|
|
height: 50px;
|
|
|
|
height: 50px;
|
|
|
@ -137,7 +165,13 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-menu--horizontal > .el-menu-item.is-active {
|
|
|
|
.el-menu--horizontal > .el-menu-item.is-active {
|
|
|
|
border-bottom: 3px solid #409eff;
|
|
|
|
border-bottom: 3px solid #{'var(--theme)'};
|
|
|
|
color: #303133;
|
|
|
|
color: #303133;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* submenu item */
|
|
|
|
|
|
|
|
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
|
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
|
|
|
line-height: 50px !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|