Merge remote-tracking branch 'origin/develop_jzl'

gassafety-web/src/components/TopNav/index.vue

@@ -8,8 +8,10 @@
       <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" -->
       <el-menu-item
         :index="item.path"
-        :key="index"
+        :key="index + `${item.meta.title}`"
         v-if="index < visibleNumber"
+        :class="{ isActive: menuAcitve == item.meta.title }"
+        @click="menuClick($event, item)"
       >
         <!-- 导航栏左侧图标 -->
         <!-- <svg-icon :icon-class="item.meta.icon" /> -->
@@ -22,8 +24,10 @@
     <!-- <div> -->
     <el-submenu
       class="onlyNavTio moreLise"
+      :class="{ noBg: moreMenu }"
       index="more"
       v-if="topMenus.length > visibleNumber"
+      ref="noBg"
     >
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
@@ -32,6 +36,7 @@
           :index="item.path"
           :key="index"
           v-if="index >= visibleNumber"
+          @click="menuClick($event, item)"
           ><svg-icon :icon-class="item.meta.icon" />
           {{ item.meta.title }}</el-menu-item
         >
@@ -55,12 +60,17 @@ export default {
       // 当前激活菜单的 index
       currentIndex: undefined,
       myRouter: [],
+      // 因为更多菜单前面的最后一个总是出问题，所以调整一下
+      menuAcitve: null,
+      moreMenu: false,
     };
   },
+
   computed: {
     theme() {
       return this.$store.state.settings.theme;
     },
+
     // 顶部显示菜单
     topMenus() {
       let topMenus = [];
@@ -132,15 +142,52 @@ export default {
   },
   mounted() {
     this.setVisibleNumber();
+    this.moreMenuChange();
   },
   methods: {
+    menuClick(e, item) {
+      this.menuAcitve = item.meta.title;
+      this.moreMenu = false;
+    },
+    // 为了解决菜单样式bug问题
+    moreMenuChange() {
+      // 展示更多的前一个路由
+      const lastMenuPath = this.topMenus[this.visibleNumber - 1].path;
+      // 当前跳转的路由
+      const routerMenuPath = this.$route.matched[0].path;
+      // 如果点击的正好是展示更多的前一个,展示更多就不能拥有高亮
+      if (lastMenuPath == routerMenuPath) {
+        this.moreMenu = true;
+        this.$refs.noBg.$el.addEventListener("mouseover", this.mouseOver);
+        this.$refs.noBg.$el.addEventListener("mouseout", this.mouseOut);
+      } else {
+        this.removeEvt();
+      }
+      // var reg = new RegExp("(\\s|^)" + 'is-active' + "(\\s|$)");
+
+      // console.log("this.topMenus",this.topMenus[this.visibleNumber-1].path)
+      // console.log("this.topMenus",this.$route.matched[0].path)
+    },
+    mouseOver() {
+      this.moreMenu = false;
+    },
+    mouseOut() {
+      this.moreMenu = true;
+    },
+    removeEvt() {
+      this.$refs.noBg.$el.removeEventListener("mouseover", this.mouseOver);
+      this.$refs.noBg.$el.removeEventListener("mouseout", this.mouseOut);
+    },
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
       const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 85);
+      this.visibleNumber = parseInt(width / 88);
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
+      // 点菜单的时候清楚事件，为了解决菜单样式bug问题
+      this.removeEvt();
+
       let path;
       this.currentIndex = key;
       if (this.ishttp(key)) {
@@ -154,7 +201,7 @@ export default {
         path = this.activeRoutes(key);
         // console.log("path",this.$store.state.permission.topbarRouters);
         console.log(this.$route.path);
-   
+
         if (this.$route.path != path[0].path) {
           if (path[0].path) {
             this.$router.push(path[0].path);
@@ -252,7 +299,8 @@ export default {
 }
 
 .navTopBar:focus,
-.navTopBar.is-active {
+.navTopBar.is-active,
+.isActive {
   outline: none;
   background-image: url("../../assets/logo/item-background.png");
   background-repeat: no-repeat;
@@ -325,4 +373,7 @@ export default {
   }
   // height: 100px;
 }
+.noBg {
+  background: none !important ;
+}
 </style>