| | |
| | | <template slot="menu"> |
| | | <div class="menu-container"> |
| | | <ul class="nav"> |
| | | <li v-for="item in navs" :key="item.id" :class="activeId === item.id ? 'active' : ''" @click="goTo(item)"> |
| | | <li v-for="item in userMenu" :key="item.label" :class="activeId === item.label ? 'active' : ''" @click="goTo(item)"> |
| | | <span> |
| | | {{ item.label }} |
| | | <i class="el-icon-caret-bottom" v-show="item.children && item.children.length > 0"></i> |
| | | </span> |
| | | <ul class="nav-sub" v-if="item.children && item.children.length > 0 && activeId === item.id && showSub"> |
| | | <ul class="nav-sub" v-if="item.children && item.children.length > 0 && activeId === item.label && showSub"> |
| | | <li v-for="child in item.children" @click="goTo(child)">{{ child.label }}</li> |
| | | </ul> |
| | | </li> |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['userInfo','workshopList']) |
| | | ...mapGetters(['userInfo','workshopList','userMenu']) |
| | | }, |
| | | watch: { |
| | | workshopList() { |
| | |
| | | }) |
| | | }, |
| | | goTo (item) { |
| | | if (item.id) { |
| | | if (item.id === this.activeId) { |
| | | if (item.children && item.children.length > 0) { // 有子菜单 |
| | | if (item.label === this.activeId) { |
| | | this.showSub = !this.showSub |
| | | } else { |
| | | this.showSub = true |
| | | } |
| | | this.activeId = item.id || this.activeId |
| | | if(item.pathName) { |
| | | this.$router.push({name: item.pathName,params: item.params,query: item.query}) |
| | | } |
| | | } else if(item.pathName){//二级菜单 |
| | | this.activeId = item.label || this.activeId |
| | | } else if (item.pathName && item.children && item.children.length === 0) { //父菜单 |
| | | this.activeId = item.label || this.activeId |
| | | this.$router.push({name: item.pathName,params: item.params,query: item.query}) |
| | | } else if(item.href) { |
| | | } else if(item.pathName){ //二级菜单 |
| | | this.$router.push({name: item.pathName,params: item.params,query: item.query}) |
| | | } else if(item.href) {// 打开新页 |
| | | window.open(item.href) |
| | | } |
| | | }, |
| | |
| | | z-index: 999; |
| | | background: rgba(0,0,0,.5); |
| | | text-align: center; |
| | | border: 1px solid #0170bc; |
| | | // border: 1px solid #0170bc; |
| | | li { |
| | | padding: 4px; |
| | | margin: 0; |
| | | color: #FFF; |
| | | background: url('./nav-li.png') 100% 100% no-repeat; |
| | | background-size: contain; |
| | | } |
| | | li:hover { |
| | | background: url('./nav-li-active.png') 100% 100% no-repeat; |
| | | background-size: contain; |
| | | color: #68D9FF; |
| | | } |
| | | } |