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,7 +25,7 @@
                   <!-- 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>
@@ -62,13 +62,41 @@ export default {
       fromNav: false,
       // 点击事件来自dropdown
       fromDropdown: false,
-      navList: nav,
       currentNav: "0",
       preActive: "",
+      showDropDown: '',
     };
   },
-  created () {
+  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);
+  },
+  beforeDestroy () {
+    window.removeEventListener("click", this.handleWindowClick);
+  },
+  methods: {
     // 监听路由 处理nav高亮 和面包屑 和subnav
+    initNav () {
       nav.forEach((nav_) => {
         if (this.$route.path.startsWith(nav_.link)) {
           this.currentNav = nav_.id;
@@ -97,15 +125,11 @@ export default {
         }
       });
     },
-  mounted () {
-    window.addEventListener("click", this.handleWindowClick);
-  },
-  beforeDestroy () {
-    window.removeEventListener("click", this.handleWindowClick);
-  },
-  methods: {
     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);
   }