| | |
| | | @select="handleSelect" |
| | | > |
| | | <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" /> |
| | | {{ item.meta.title }}</el-menu-item |
| | | > |
| | |
| | | }; |
| | | }, |
| | | computed: { |
| | | theme() { |
| | | return this.$store.state.settings.theme; |
| | | }, |
| | | // 顶部显示菜单 |
| | | topMenus() { |
| | | let topMenus = []; |
| | |
| | | if(router.path === "/") { |
| | | router.children[item].path = "/redirect/" + router.children[item].path; |
| | | } else { |
| | | router.children[item].path = router.path + "/" + router.children[item].path; |
| | | if(!this.ishttp(router.children[item].path)) { |
| | | router.children[item].path = router.path + "/" + router.children[item].path; |
| | | } |
| | | } |
| | | router.children[item].parentPath = router.path; |
| | | } |
| | |
| | | // 菜单选择事件 |
| | | handleSelect(key, keyPath) { |
| | | this.currentIndex = key; |
| | | if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) { |
| | | if (this.ishttp(key)) { |
| | | // http(s):// 路径新窗口打开 |
| | | window.open(key, "_blank"); |
| | | } else if (key.indexOf("/redirect") !== -1) { |
| | |
| | | this.$store.commit("SET_SIDEBAR_ROUTERS", routes); |
| | | } |
| | | return routes; |
| | | }, |
| | | ishttp(url) { |
| | | return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1 |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | <style lang="scss"> |
| | | .el-menu--horizontal > .el-menu-item { |
| | | float: left; |
| | | height: 50px; |
| | |
| | | } |
| | | |
| | | .el-menu--horizontal > .el-menu-item.is-active { |
| | | border-bottom: 3px solid #409eff; |
| | | border-bottom: 3px solid #{'var(--theme)'}; |
| | | color: #303133; |
| | | } |
| | | |
| | | /* submenu item */ |
| | | .el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | height: 50px !important; |
| | | line-height: 50px !important; |
| | | } |
| | | </style> |