更新侧边栏收缩

src/components/filter-search/index.vue

@@ -84,7 +84,7 @@ export default {
   },
   mounted() {
     this.initSearch = this.$route.query
-    console.log(this.activeItems)
+    // console.log(this.activeItems)
   },
   watch: {
     $route() {

src/layout/components/Sidebar/index.vue

@@ -70,7 +70,6 @@ export default {
     },
     isCollapse () {
       return false
-
     },
     getSidebarMenuActive: function() {
       const route = this.$route;
@@ -106,9 +105,16 @@ export default {
         }
       });
       let index = this.menuOperation(childList.children)
-      // console.log(index)
       let status = index > 1 ? true : false
-      this.$emit('childStatus', status)
+      let routeParentName = sessionStorage.getItem('routeParentName')
+      let params = {
+        status: status
+      }
+      if(routeParentName != meta.belongTopMenu) {
+        params.isCollapse = true
+        sessionStorage.setItem('routeParentName', meta.belongTopMenu)
+      }
+      this.$emit('childStatus', params)
     },
     menuOperation(arr) {
       let index = 0;

src/layout/index.vue

@@ -1,15 +1,22 @@
 <template>
   <!--  :class="classObj" -->
   <div class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened"
+    <!-- <div v-if="device==='mobile'&&sidebar.opened"
          class="drawer-bg"
-         @click="handleClickOutside" />
+         @click="handleClickOutside" /> -->
     <div :class="{'fixed-header':fixedHeader}" style="width: 100%;">
         <navbar />
     </div>
-    <sidebar class="sidebar-container" @childStatus="childStatus" v-show="onlyStatus" />
-    <div class="main-container" :class="[ onlyStatus ? null : 'noContainer' ]">
-      <div :class="{'fixed-header':fixedHeader, 'noTagView': !onlyStatus}" style="top: 90px;" >
+    <div class="collapse" v-if="onlyStatus" @click="handleClickOutside" :class="[onlyStatus && isCollapse ? null : 'hideSidebar' ]">
+      <div class='box'></div>
+      <div class='box2'>
+        <i :class="[onlyStatus && isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right']"></i>
+      </div>
+      <div class='box3'></div>
+    </div>
+    <sidebar class="sidebar-container" @childStatus="childStatus" :class="[onlyStatus && isCollapse ? null : 'noSide']" />
+    <div class="main-container" :class="[ onlyStatus && isCollapse ? null : 'noContainer' ]">
+      <div :class="{'fixed-header':fixedHeader, 'noTagView': !(onlyStatus && isCollapse)}" style="top: 90px;" >
         <!-- <navbar /> -->
         <tags-view></tags-view>
       </div>
@@ -45,23 +52,27 @@ export default {
       return {
         hideSidebar: false,
         openSidebar: this.sidebar.opened,
-        // withoutAnimation: this.sidebar.withoutAnimation,
+        withoutAnimation: this.sidebar.withoutAnimation,
         // mobile: this.device === 'mobile'
       }
     }
   },
   data() {
     return {
-      onlyStatus: true
+      onlyStatus: true,
+      isCollapse: true, // 是否折叠, true 不折叠，false 折叠
     }
   },
   methods: {
-    childStatus(status) {
-      // console.log(status)
-      this.onlyStatus = status
+    childStatus(params) {
+      this.onlyStatus = params.status
+      if(params.isCollapse) {
+        this.isCollapse = params.isCollapse
+      }
     },
     handleClickOutside () {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      // this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.isCollapse = !this.isCollapse
     }
   }
 }
@@ -107,6 +118,7 @@ export default {
 
 .hideSidebar .fixed-header {
   width: calc(100% - 54px);
+  transition: width 0.28s;
 }
 
 .mobile .fixed-header {
@@ -125,4 +137,61 @@ export default {
 .noTagView {
   width: 100% !important;
 }
+
+#app .sidebar-container.noSide {
+  width: 0 !important;
+}
+
+.hideSidebar {
+  left: 0 !important;
+  transition: left .28s;
+}
+.collapse {
+  position: fixed;
+  top: 50vh;
+  transition: left .28s;
+  left: 195px;
+  z-index: 999;
+  // background: #d8e0e7;
+  // height: 90px;
+  width: 16px;
+  overflow: hidden;
+  .box,.box3{
+    width:0px;
+    height:0px;
+
+    border-top:16px solid rgba(0,0,0,0);
+    border-right:16px solid  rgba(0,0,0,0);
+    border-bottom:16px solid #d8e0e7;
+    border-left:16px solid  rgba(0,0,0,0);
+  }
+
+  .box2{
+    width:16px;
+    height:60px;
+    background-color: #d8e0e7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-icon-arrow-left, .el-icon-arrow-right {
+      font-size: 18px;
+      font-weight: bold;
+      color: #fff;
+    }
+  }
+  .box {
+    transform: translate(-23px, 16px)  rotate(225deg);
+  }
+  .box3 {
+    transform: translate(-23px, -16px)  rotate(315deg);
+  }
+  &:hover {
+    .box, .box3 {
+      border-bottom-color: #cbd1d5;
+    }
+    .box2 {
+      background: #cbd1d5;
+    }
+  }
+}
 </style>