暂存

src/components/TagsView/ScrollPane.vue

 <template>
   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+      <div :class="openBar?'icon':'iconLeft'"  class="iconfont"  @click="modifyStyle()">
+            &#xe644;
+      </div>
     <slot />
   </el-scrollbar>
 </template>
 
 <script>
+import { EventBus } from "../event-bus.js";
 const tagAndTagSpacing = 4 // tagAndTagSpacing
 
 export default {
   name: 'ScrollPane',
   data() {
     return {
-      left: 0
+      left: 0,
+      openBar:true,
     }
   },
   computed: {
@@ -20,6 +25,15 @@ export default {
     }
   },
   methods: {
+    modifyStyle() {
+      this.openBar=!this.openBar
+      if(!this.openBar){
+        EventBus.$emit('modifyStyleEvent', 'new-style');
+      }else{
+        EventBus.$emit('modifyStyleEvent', 'old-style');
+      }
+     
+    },
     handleScroll(e) {
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const $scrollWrapper = this.scrollWrapper
@@ -72,7 +86,37 @@ export default {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
+  padding-left: 100px;
   width: 100%;
+  .icon{
+    top:6px;
+    width: 48px;
+    height: 27px;
+    line-height: 27px;
+    text-align: center;
+    color: #edeaff;
+    background-color: #63a4a6;
+    border: 1px solid #edf0f6;
+    border-radius: 5px;
+    font-size: 24px;
+    position: absolute;
+    left: 0;
+    transform: rotate(180deg);
+  }
+  .iconLeft{
+    top:6px;
+    width: 48px;
+    height: 27px;
+    line-height: 27px;
+    text-align: center;
+    color: #edeaff;
+    background-color: #63a4a6;
+    border: 1px solid #edf0f6;
+    border-radius: 5px;
+    font-size: 24px;
+    position: absolute;
+    left: 0;
+  }
   /deep/ {
     .el-scrollbar__bar {
       bottom: 0px;
@@ -82,4 +126,13 @@ export default {
     }
   }
 }
+.fold-button{
+    // width:25px;
+    // height:20px;
+    // line-height: 28px;
+    // text-align: center;
+    // font-size: 14px;
+    // font-weight: 600;
+
+}
 </style>

src/components/TagsView/index.vue

@@ -235,6 +235,7 @@ export default {
 <style lang="scss" scoped>
 @import '@/styles/common.scss';
 /deep/ .scroll-container .el-scrollbar__wrap {
+// padding-left: 50px;
   scrollbar-width: none;
 }
 .hamburger-container {

src/components/event-bus.js

+import Vue from 'vue'
+export const EventBus = new Vue()
\ No newline at end of file

src/views/layout/continerView.vue

@@ -40,6 +40,8 @@ export default {
     height: calc(100% - 55px);
     position: relative;
     padding: 15px;
+    display: flex;
+    flex-direction:column;
   }
 
 </style>
\ No newline at end of file

src/views/layout/mainLayout.vue

 <template>
   <div class="layout">
-    <LeftBar class="bar" :authority="authority" :autho="autho" ref="child"></LeftBar>
+    <LeftBar :class="openBar?'bar':'barClose'" :authority="authority" :autho="autho" ref="child"></LeftBar>
     <ContinerView class="continer" id="myElement">
       <router-view></router-view>
     </ContinerView>
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import { EventBus } from "../../components/event-bus.js";
 import ContinerView from "./continerView";
 import LeftBar from "./leftBar";
 
@@ -58,6 +59,7 @@ export default {
   },
   data() {
     return {
+      openBar:true,
       title: "确认更改",
       submenu: [
         {
@@ -154,9 +156,16 @@ export default {
   
   },
   mounted() {
+    EventBus.$on('modifyStyleEvent', this.updateStyle)
 
   },
+
   methods: {
+    updateStyle(style) {
+      console.log('9999999')
+      this.openBar=!this.openBar
+    },
+    
     handleResize() {
       // 处理窗口大小变化的逻辑
       console.log("Window was resized!");
@@ -195,6 +204,9 @@ export default {
 
     }
   },
+  beforeDestroy() {
+    EventBus.$off('modifyStyleEvent', this.updateStyle);
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -208,7 +220,12 @@ export default {
     position: relative;
   overflow: hidden;
   .bar {
-    width: 235px !important;
+    width: 235px;
+    height: 100%;
+    flex-shrink: 0;
+  }
+  .barClose {
+    width: 0;
     height: 100%;
     flex-shrink: 0;
   }