路由栏添加点击展开关闭功能

src/components/RouterBanner.vue

@@ -5,36 +5,46 @@
       v-for="(routerObj, index) in routerList"
       :key="index"
     >
-      <div class="first_level" v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer">
+      <div
+        class="first_level"
+        v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer"
+        @click="showLink(index)"
+        :class="{selectStyle: isShowLink[index]}"
+      >
         <div class="icon">
-          <img :src="routerObj.img" alt="icon" />
+          <img :src="routerObj.img"/>
         </div>
         <div class="title" v-if="!routerObj.path">
           {{ routerObj.title }}
         </div>
-        <div v-else>
+        <div v-else class="first_level">
           <router-link :to="routerObj.path" tag="li" class="title">
             <p  @click="getNavTitle(routerObj.title, '')">{{routerObj.title}}</p>
           </router-link>
         </div>
         <div class="switch">
-          <img src="../img/switch.png"/>
+          <img src="../img/switch2.png" v-if="!isShowLink[index]">
+          <img src="../img/switch1.png" v-else/>
         </div>
       </div>
-      <div v-if="routerObj.list.length" class="second_level">
+      <div
+        v-if="routerObj.list.length"
+        class="second_level"
+        v-show="isShowLink[index]"
+      >
         <div
           v-for="(list, index) in routerObj.list"
           :key="index">
-        <router-link
-          v-if="list.isShow === 'all' || list.isShow === isManufacturer"
-          :to="list.path"
-          tag="li"
-        >
-          <p
-            @click="getNavTitle(routerObj.title, list.title)"
-            :class="{blueColor: list.path === routerPath}"
-          >- {{ list.title }}</p>
-        </router-link>
+          <router-link
+            v-if="list.isShow === 'all' || list.isShow === isManufacturer"
+            :to="list.path"
+            tag="li"
+          >
+            <p
+              @click="getNavTitle(routerObj.title, list.title)"
+              :class="{blueColor: list.path === routerPath}"
+            >- {{ list.title }}</p>
+          </router-link>
         </div>
       </div>
     </div>
@@ -51,6 +61,7 @@ export default {
   },
   data() {
     return {
+      isShowLink: [true, false, false],
       routerList: [
         {
           title: "数据管理",
@@ -111,7 +122,6 @@ export default {
   },
   computed: {
       routerPath: function() {
-        console.log(this.$route.path);
         return this.$route.path
       }
   },
@@ -119,10 +129,15 @@ export default {
     getNavTitle: function(navTitle1, navTitle2) {
       // 点击路由的时候，修改导航栏
       this.$emit('change_nav', navTitle1, navTitle2);
+    },
+    // 展开、关闭router栏
+    showLink: function(i) {
+      let flag = this.isShowLink[i];
+      this.isShowLink = [false, false, false];
+      this.isShowLink.splice(i, 1, !flag);
     }
   },
   mounted() {
-    console.log(this.isManufacturer);
   }
 };
 </script>
@@ -162,14 +177,17 @@ export default {
         }
       }
       .switch {
-        width: 21px;
-        height: 21px;
+        width: 11px;
+        height: 11px;
         margin-left: 20px;
         img{
-          width: 21px;
-          height: 21px;
+          width: 11px;
+          height: 11px;
         }
       }
+      p{
+        font-size: 14px;
+      }
     }
     .second_level {
       li {
@@ -191,4 +209,14 @@ export default {
 .blueColor{
   color: #0056a0;
 }
+.selectStyle{
+  background-color: rgb(0, 86, 160);
+  color: #fff;
+  .title{
+    color: #fff;
+  }
+        p{
+          color: #fff;
+        }
+      }
 </style>