调整导航

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" /> -->
@@ -32,6 +34,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,6 +58,8 @@ export default {
       // 当前激活菜单的 index
       currentIndex: undefined,
       myRouter: [],
+      // 因为更多菜单前面的最后一个总是出问题，所以调整一下
+      menuAcitve: null,
     };
   },
   computed: {
@@ -134,10 +139,14 @@ export default {
     this.setVisibleNumber();
   },
   methods: {
+    menuClick(e, item) {
+      this.menuAcitve = item.meta.title;
+    },
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
       const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 85);
+      this.visibleNumber = parseInt(width / 90);
+      console.log(this.visibleNumber);
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
@@ -154,7 +163,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 +261,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;