liwj提交

src/components/layout/englishHeader/index.vue

@@ -14,10 +14,10 @@
             <ul class="navbar-nav">
               <!-- Nav items-->
               <template v-for="nav in navList">
-                <li v-if="nav.children && nav.children.length > 0" class="gs-nav-item nav-item" :key="nav.id"
-                  :class="{ active: currentNav === nav.id }" @click="handleNavClick(nav, $event)">
-                  <a :id="`gs-nav-item-${nav.id}`" class="nav-link" aria-current="page" href="javascript:void(0)"
-                    role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ nav.name }}</a>
+                <li v-if="nav.children && nav.children.length > 0" @click="handleNavClick(nav, $event)"
+                  class="gs-nav-item nav-item" :class="{show_dropdown:showDropDown===nav.id}"
+                  :active_nav="currentNav === nav.id" :key="nav.id">
+                  <a :id="`gs-nav-item-${nav.id}`" class="nav-link" href="javascript:void(0)">{{ nav.name }}</a>
                   <i class="mobile-menu-down bi bi-chevron-compact-down"></i>
 
                   <!-- Dropdown Menu -->
@@ -25,10 +25,10 @@
                   <!-- End Dropdown Menu -->
                 </li>
                 <li v-else :key="nav.id" @click="handleNavClick(nav, $event)" class="gs-nav-item nav-item"
-                  :class="{ active: currentNav === nav.id }">
+                  :active_nav="currentNav === nav.id">
                   <a class="nav-link" href="javascript:void(0)">{{
-                    nav.name
-                  }}</a>
+                      nav.name
+                    }}</a>
                 </li>
               </template>
 
@@ -62,40 +62,31 @@ export default {
       fromNav: false,
       // 点击事件来自dropdown
       fromDropdown: false,
-      navList: nav,
       currentNav: "0",
       preActive: "",
+      showDropDown: '',
     };
   },
-  created () {
-    // 监听路由 处理nav高亮 和面包屑 和subnav
-    nav.forEach((nav_) => {
-      if (this.$route.path.startsWith(nav_.link)) {
-        this.currentNav = nav_.id;
-
-        // nav_.children &&
-        //   nav_.children.length > 0 &&
-        //   this.$store.commit("system/SET_SUB_NAV", nav_.children);
-        // console.log(nav_, this.$route, 'this.$route.path');
-        if (nav_.link === this.$route.path) {
-          nav_.breadcrumb &&
-            this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
-        } else {
-          // TODO 去dropdown里面精确查找当前的路径
-          let result;
-          result = deepFindBreadcrumb(nav_.children, this.$route.path);
-          // console.log(this.$route.path, result, 'resultresultresult');
-          if (result.length === 0 && Object.keys(this.$route.query).length > 0) {
-            const queryString = Qs.stringify(cleanObject(this.$route.query));
-            let path = `${this.$route.path}?${queryString}`;
-            result = deepFindBreadcrumb(nav_.children, path);
-          }
-          result &&
-            result.breadcrumb &&
-            this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
+  watch: {
+    $route: {
+      handler () {
+        this.initNav();
+      },
+      deep: true,
+      immediate: true,
+    }
+  },
+  computed: {
+    navList () {
+      let list = [];
+      nav.forEach(el => {
+        if (!el.isHiddenMenu) {
+          list.push(el);
         }
-      }
-    });
+      })
+      return list;
+      // return nav;
+    }
   },
   mounted () {
     window.addEventListener("click", this.handleWindowClick);
@@ -104,8 +95,41 @@ export default {
     window.removeEventListener("click", this.handleWindowClick);
   },
   methods: {
+    // 监听路由 处理nav高亮 和面包屑 和subnav
+    initNav () {
+      nav.forEach((nav_) => {
+        if (this.$route.path.startsWith(nav_.link)) {
+          this.currentNav = nav_.id;
+
+          // nav_.children &&
+          //   nav_.children.length > 0 &&
+          //   this.$store.commit("system/SET_SUB_NAV", nav_.children);
+          // console.log(nav_, this.$route, 'this.$route.path');
+          if (nav_.link === this.$route.path) {
+            nav_.breadcrumb &&
+              this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
+          } else {
+            // TODO 去dropdown里面精确查找当前的路径
+            let result;
+            result = deepFindBreadcrumb(nav_.children, this.$route.path);
+            // console.log(this.$route.path, result, 'resultresultresult');
+            if (result.length === 0 && Object.keys(this.$route.query).length > 0) {
+              const queryString = Qs.stringify(cleanObject(this.$route.query));
+              let path = `${this.$route.path}?${queryString}`;
+              result = deepFindBreadcrumb(nav_.children, path);
+            }
+            result &&
+              result.breadcrumb &&
+              this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
+          }
+        }
+      });
+    },
     handleWindowClick () {
-      // console.log('handleWindowClick', this.fromNav, this.preActive);
+      console.log('handleWindowClick', this.fromNav, this.preActive);
+      if (!this.fromNav) {
+        this.showDropDown = ''
+      }
       if (this.preActive && !this.fromNav) {
         this.currentNav = this.preActive;
         this.preActive = "";
@@ -115,6 +139,8 @@ export default {
     },
 
     handleNavClick (nav) {
+      console.log('handleNavClick', nav)
+      this.showDropDown = nav.id;
       if (nav.linkFlag == 1) {
         window.open(nav.link);
       } else if (!nav.children || nav.children.length === 0) {
@@ -190,7 +216,7 @@ export default {
 
   // 导航item样式
   .gs-nav-item.nav-item {
-    &.active > a,
+    &[active_nav="true"] > a,
     a.show {
       color: #f26335;
 
@@ -260,6 +286,10 @@ export default {
   }
 }
 
+.show_dropdown .dropdown-menu {
+  display: block;
+}
+
 @media (max-width: 1400px) {
   //导航item边距
   // .gs-header-nav .gs-nav-item.nav-item {
@@ -292,10 +322,12 @@ export default {
 
   .gs-header-nav .gs-nav-item.nav-item {
     position: relative;
+
     > a {
       width: 100%;
     }
-    &.active > a,
+
+    &[active_nav="true"] > a,
     a.show {
       color: #f26335;
 
@@ -306,7 +338,8 @@ export default {
     }
   }
 
-  .gs-header-nav .gs-nav-item.nav-item.active .mobile-menu-down {
+  .gs-header-nav .gs-nav-item.nav-item.active_nav .mobile-menu-down,
+  .gs-header-nav .gs-nav-item.nav-item.show .mobile-menu-down {
     transform: rotate(180deg);
   }