|
|
|
@ -5,25 +5,38 @@ |
|
|
|
@select="handleSelect" |
|
|
|
> |
|
|
|
<template v-for="(item, index) in topMenus"> |
|
|
|
<el-menu-item :style="{'--theme': theme}" :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 |
|
|
|
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" |
|
|
|
:icon-class="item.meta.icon"/> |
|
|
|
:icon-class="item.meta.icon" |
|
|
|
/> |
|
|
|
{{ item.meta.title }} |
|
|
|
</el-menu-item> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- 顶部菜单超出数量折叠 --> |
|
|
|
<el-submenu :style="{'--theme': theme}" index="more" :key="visibleNumber" v-if="topMenus.length > visibleNumber"> |
|
|
|
<el-submenu |
|
|
|
:style="{ '--theme': theme }" |
|
|
|
index="more" |
|
|
|
:key="visibleNumber" |
|
|
|
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"> |
|
|
|
v-if="index >= visibleNumber" |
|
|
|
> |
|
|
|
<svg-icon |
|
|
|
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" |
|
|
|
:icon-class="item.meta.icon"/> |
|
|
|
:icon-class="item.meta.icon" |
|
|
|
/> |
|
|
|
{{ item.meta.title }} |
|
|
|
</el-menu-item> |
|
|
|
</template> |
|
|
|
@ -36,7 +49,7 @@ import { constantRoutes } from "@/router"; |
|
|
|
import { isHttp } from "@/utils/validate"; |
|
|
|
|
|
|
|
// 隐藏侧边栏路由 |
|
|
|
const hideList = ['/index', '/user/profile']; |
|
|
|
const hideList = ["/index", "/user/profile"]; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
@ -44,7 +57,7 @@ export default { |
|
|
|
// 顶部栏初始数 |
|
|
|
visibleNumber: 5, |
|
|
|
// 当前激活菜单的 index |
|
|
|
currentIndex: undefined |
|
|
|
currentIndex: undefined, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -76,11 +89,12 @@ export default { |
|
|
|
this.routers.map((router) => { |
|
|
|
for (var item in router.children) { |
|
|
|
if (router.children[item].parentPath === undefined) { |
|
|
|
if(router.path === "/") { |
|
|
|
if (router.path === "/") { |
|
|
|
router.children[item].path = "/" + router.children[item].path; |
|
|
|
} else { |
|
|
|
if(!isHttp(router.children[item].path)) { |
|
|
|
router.children[item].path = router.path + "/" + router.children[item].path; |
|
|
|
if (!isHttp(router.children[item].path)) { |
|
|
|
router.children[item].path = |
|
|
|
router.path + "/" + router.children[item].path; |
|
|
|
} |
|
|
|
} |
|
|
|
router.children[item].parentPath = router.path; |
|
|
|
@ -94,25 +108,29 @@ export default { |
|
|
|
activeMenu() { |
|
|
|
const path = this.$route.path; |
|
|
|
let activePath = path; |
|
|
|
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { |
|
|
|
if ( |
|
|
|
path !== undefined && |
|
|
|
path.lastIndexOf("/") > 0 && |
|
|
|
hideList.indexOf(path) === -1 |
|
|
|
) { |
|
|
|
const tmpPath = path.substring(1, path.length); |
|
|
|
if (!this.$route.meta.link) { |
|
|
|
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); |
|
|
|
this.$store.dispatch('app/toggleSideBarHide', false); |
|
|
|
this.$store.dispatch("app/toggleSideBarHide", false); |
|
|
|
} |
|
|
|
} else if(!this.$route.children) { |
|
|
|
} else if (!this.$route.children) { |
|
|
|
activePath = path; |
|
|
|
this.$store.dispatch('app/toggleSideBarHide', true); |
|
|
|
this.$store.dispatch("app/toggleSideBarHide", true); |
|
|
|
} |
|
|
|
this.activeRoutes(activePath); |
|
|
|
return activePath; |
|
|
|
}, |
|
|
|
}, |
|
|
|
beforeMount() { |
|
|
|
window.addEventListener('resize', this.setVisibleNumber) |
|
|
|
window.addEventListener("resize", this.setVisibleNumber); |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
window.removeEventListener('resize', this.setVisibleNumber) |
|
|
|
window.removeEventListener("resize", this.setVisibleNumber); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.setVisibleNumber(); |
|
|
|
@ -126,24 +144,24 @@ export default { |
|
|
|
// 菜单选择事件 |
|
|
|
handleSelect(key, keyPath) { |
|
|
|
this.currentIndex = key; |
|
|
|
const route = this.routers.find(item => item.path === key); |
|
|
|
const route = this.routers.find((item) => item.path === key); |
|
|
|
if (isHttp(key)) { |
|
|
|
// http(s):// 路径新窗口打开 |
|
|
|
window.open(key, "_blank"); |
|
|
|
} else if (!route || !route.children) { |
|
|
|
// 没有子路由路径内部打开 |
|
|
|
const routeMenu = this.childrenMenus.find(item => item.path === key); |
|
|
|
const routeMenu = this.childrenMenus.find((item) => item.path === key); |
|
|
|
if (routeMenu && routeMenu.query) { |
|
|
|
let query = JSON.parse(routeMenu.query); |
|
|
|
this.$router.push({ path: key, query: query }); |
|
|
|
} else { |
|
|
|
this.$router.push({ path: key }); |
|
|
|
} |
|
|
|
this.$store.dispatch('app/toggleSideBarHide', true); |
|
|
|
this.$store.dispatch("app/toggleSideBarHide", true); |
|
|
|
} else { |
|
|
|
// 显示左侧联动菜单 |
|
|
|
this.activeRoutes(key); |
|
|
|
this.$store.dispatch('app/toggleSideBarHide', false); |
|
|
|
this.$store.dispatch("app/toggleSideBarHide", false); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 当前激活的路由 |
|
|
|
@ -156,36 +174,35 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
if(routes.length > 0) { |
|
|
|
if (routes.length > 0) { |
|
|
|
this.$store.commit("SET_SIDEBAR_ROUTERS", routes); |
|
|
|
} else { |
|
|
|
this.$store.dispatch('app/toggleSideBarHide', true); |
|
|
|
} |
|
|
|
this.$store.dispatch("app/toggleSideBarHide", true); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.topmenu-container.el-menu--horizontal > .el-menu-item { |
|
|
|
line-height: 26px !important; |
|
|
|
float: left; |
|
|
|
height: 50px !important; |
|
|
|
line-height: 50px !important; |
|
|
|
color: #999093 !important; |
|
|
|
padding: 0 5px !important; |
|
|
|
margin: 0 10px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
.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: 50px !important; |
|
|
|
line-height: 50px !important; |
|
|
|
line-height: 26px !important; |
|
|
|
color: #999093 !important; |
|
|
|
padding: 0 5px !important; |
|
|
|
margin: 0 10px !important; |
|
|
|
|
1747191978@qq.com
4 months ago
