| | |
| | | </template> |
| | | |
| | | <!-- 顶部菜单超出数量折叠 --> |
| | | <el-submenu index="more" v-if="topMenus.length > visibleNumber"> |
| | | <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 |
| | |
| | | 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; |
| | | } |
| | |
| | | // 默认激活的菜单 |
| | | activeMenu() { |
| | | const path = this.$route.path; |
| | | let activePath = this.routers[0].path; |
| | | let activePath = this.defaultRouter(); |
| | | if (path.lastIndexOf("/") > 0) { |
| | | const tmpPath = path.substring(1, path.length); |
| | | activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); |
| | |
| | | } |
| | | var routes = this.activeRoutes(activePath); |
| | | if (routes.length === 0) { |
| | | activePath = this.currentIndex || this.routers[0].path |
| | | activePath = this.currentIndex || this.defaultRouter() |
| | | this.activeRoutes(activePath); |
| | | } |
| | | return activePath; |
| | |
| | | const width = document.body.getBoundingClientRect().width / 3; |
| | | this.visibleNumber = parseInt(width / 85); |
| | | }, |
| | | // 默认激活的路由 |
| | | defaultRouter() { |
| | | let router; |
| | | Object.keys(this.routers).some((key) => { |
| | | if (!this.routers[key].hidden) { |
| | | router = this.routers[key].path; |
| | | return true; |
| | | } |
| | | }); |
| | | return router; |
| | | }, |
| | | // 菜单选择事件 |
| | | 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"> |
| | | .el-menu--horizontal > .el-menu-item { |
| | | .topmenu-container.el-menu--horizontal > .el-menu-item { |
| | | float: left; |
| | | height: 50px; |
| | | line-height: 50px; |
| | | margin: 0; |
| | | border-bottom: 3px solid transparent; |
| | | color: #999093; |
| | | padding: 0 5px; |
| | | margin: 0 10px; |
| | | height: 50px !important; |
| | | line-height: 50px !important; |
| | | color: #999093 !important; |
| | | padding: 0 5px !important; |
| | | margin: 0 10px !important; |
| | | } |
| | | |
| | | .el-menu--horizontal > .el-menu-item.is-active { |
| | | border-bottom: 3px solid #{'var(--theme)'}; |
| | | .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 */ |
| | | .el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | height: 50px !important; |
| | | line-height: 50px !important; |
| | | .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | float: left; |
| | | height: 50px !important; |
| | | line-height: 50px !important; |
| | | color: #999093 !important; |
| | | padding: 0 5px !important; |
| | | margin: 0 10px !important; |
| | | } |
| | | </style> |