器件选型悬浮框

components/home/KindCategory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kind-category" ref="kindCategory" @mouseleave="hideChildrenLayout()">
+  <div class="kind-category" @mouseleave="hideChildrenLayout()">
     <ul class="kind-main list-unstyled">
       <li v-for="kind in kindsToShow" class="kind-main-item" :class="{active: kind.id==activeKindId}"
         @mouseenter="showChildrenLayout(kind)">
@@ -66,15 +66,6 @@
         this.activeKindId = null
       }
     },
-    watch: {
-      '$route.path': {
-        handler: function (path) {
-          if (path !== '/') {
-            this.$refs.kindCategory.style.display = 'none'
-          }
-        }
-      }
-    },
 //    mounted () {
 //      this.$http.get(`/api/product/kind/0/children_all`)
 //        .then(response => {

components/main/Nav.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <nuxt-link to="/product/kind/home" class="item item-first" tag="div">
         <div>器件选型
-          <kind-category v-if="$route.path != '/'" @loadchild="loadProductKinds" id="kindCategory"></kind-category>
+          <kind-category v-if="$route.path != '/'" :class="{'change': isChange}" @loadchild="loadProductKinds" id="kindCategory"></kind-category>
         </div>
       </nuxt-link>
       <nuxt-link :to="'/'" class="item" exact>
@@ -56,12 +56,33 @@
     name: 'navView',
     data () {
       return {
-        pcbId: process.env.pcbId
+        pcbId: process.env.pcbId,
+        isChange: false
       }
     },
     components: {
       KindCategory
     },
+    watch: {
+      '$route.path': {
+        handler: function (path) {
+          if (path !== '/') {
+            this.isChange = true
+            // 直接设为false无作用，因此采用定时器
+            setTimeout(() => {
+              this.isChange = false
+            }, 100)
+          }
+        }
+      }
+    },
+//      '$route.params': {
+//        handler: function (path) {
+//          console.log(123)
+//          this.isChange = true
+//        }
+//      }
+//    },
     methods: {
       loadProductKinds (id) {
         this.$store.dispatch('loadAllProductKinds', {id})
@@ -182,6 +203,10 @@
           }
         }
       }
+
+      #kindCategory.change {
+        display: none !important;
+      }
     }
   }
 </style>