|
@@ -1,7 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<div class="menu">
|
|
<div class="menu">
|
|
<ul class="menu-list">
|
|
<ul class="menu-list">
|
|
- <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
|
|
|
|
|
|
+ <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }"
|
|
|
|
+ @mouseenter="subMenuShow(menu.children, index)">
|
|
<router-link v-if="!menu.children" :to="menu.path">
|
|
<router-link v-if="!menu.children" :to="menu.path">
|
|
<el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
|
|
<el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
|
|
<div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
|
|
<div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
|
|
@@ -17,7 +18,7 @@
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
- <div class="sub-menu" v-show="isShowSubMenu">
|
|
|
|
|
|
+ <!-- <div class="sub-menu" v-show="isShowSubMenu">
|
|
<ul class="menu-list">
|
|
<ul class="menu-list">
|
|
<li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
|
|
<li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
|
|
<router-link :to="menu.path">
|
|
<router-link :to="menu.path">
|
|
@@ -28,7 +29,7 @@
|
|
</router-link>
|
|
</router-link>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
@@ -37,7 +38,7 @@ export default {
|
|
SvgIcon,
|
|
SvgIcon,
|
|
},
|
|
},
|
|
props: {},
|
|
props: {},
|
|
- data() {
|
|
|
|
|
|
+ data () {
|
|
return {
|
|
return {
|
|
currRoot: "monitor",
|
|
currRoot: "monitor",
|
|
menuData: [
|
|
menuData: [
|
|
@@ -183,11 +184,11 @@ export default {
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- click(index) {
|
|
|
|
|
|
+ click (index) {
|
|
this.activeIndex = index;
|
|
this.activeIndex = index;
|
|
this.subIndex = null;
|
|
this.subIndex = null;
|
|
},
|
|
},
|
|
- subMenuShow(children, index) {
|
|
|
|
|
|
+ subMenuShow (children, index) {
|
|
if (children) {
|
|
if (children) {
|
|
this.isShowSubMenu = true;
|
|
this.isShowSubMenu = true;
|
|
this.parentIndex = index;
|
|
this.parentIndex = index;
|
|
@@ -197,13 +198,13 @@ export default {
|
|
}
|
|
}
|
|
this.subMenu = children;
|
|
this.subMenu = children;
|
|
},
|
|
},
|
|
- subclick(index) {
|
|
|
|
|
|
+ subclick (index) {
|
|
this.activeIndex = this.parentIndex;
|
|
this.activeIndex = this.parentIndex;
|
|
this.subIndex = index;
|
|
this.subIndex = index;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- currentMenu() {
|
|
|
|
|
|
+ currentMenu () {
|
|
let data = this.menuData.filter((t) => {
|
|
let data = this.menuData.filter((t) => {
|
|
return t.id == this.currRoot;
|
|
return t.id == this.currRoot;
|
|
})[0].data;
|
|
})[0].data;
|
|
@@ -213,7 +214,7 @@ export default {
|
|
watch: {
|
|
watch: {
|
|
// 监听路由
|
|
// 监听路由
|
|
$route: {
|
|
$route: {
|
|
- handler: function(val, oldVal) {
|
|
|
|
|
|
+ handler: function (val, oldVal) {
|
|
this.menuData.some((element, index) => {
|
|
this.menuData.some((element, index) => {
|
|
if (val.path.includes(element.id)) {
|
|
if (val.path.includes(element.id)) {
|
|
this.currRoot = element.id;
|
|
this.currRoot = element.id;
|