侧边栏增加是否固定按钮

src/App.vue

@@ -5,7 +5,7 @@
     :style="{
       width: `${style.width}px`,
       height: `${style.height}px`,
-      transform: `${style.transform}`
+      transform: `${style.transform}`,
     }"
   >
     <div v-if="isLogined" class="main">
@@ -29,7 +29,7 @@
       </div>
       <div
         class="menu-body"
-        :class="{ hover: isShowMenu }"
+        :class="{ hover: isFixed ? true : isShowMenu }"
         @mouseenter="showMenu"
         @mouseleave="hideMenu"
         v-show="
@@ -77,14 +77,7 @@
           </el-sub-menu>
         </el-menu>
       </div>
-      <div
-        class="main-body"
-        :style="
-          $store.state.themeName === 'light' && hideMenus === '0'
-            ? 'margin-left: 75px; max-width  : calc(100vw - 54px - 25px);'
-            : ''
-        "
-      >
+      <div class="main-body" :style="{ paddingLeft: isFixed ? '52px' : 0 }">
         <router-view />
       </div>
     </div>
@@ -144,6 +137,9 @@ export default {
     isLogined() {
       return this.$store.state.user?.loginState;
     },
+    isFixed() {
+      return this.$store.state.isFixed;
+    },
   },
   created() {
     let that = this;
@@ -198,7 +194,7 @@ export default {
       //   if (d > 1) {
       //     f = 18;
       //   }
-      return { x: w, y: h,  };
+      return { x: w, y: h };
     },
     setScale() {
       let scale = this.getScale();
@@ -211,14 +207,18 @@ export default {
       this.root = data.id;
     },
     showMenu() {
-      this.isShowMenu = true;
-      this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
+      if (!this.isFixed) {
+        this.isShowMenu = true;
+        this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
+      }
     },
     hideMenu() {
-      const that = this;
-      this.memuCloseTimeout = setTimeout(function () {
-        that.isShowMenu = false;
-      }, 500);
+      if (!this.isFixed) {
+        const that = this;
+        this.memuCloseTimeout = setTimeout(function () {
+          that.isShowMenu = false;
+        }, 500);
+      }
     },
     login() {
       this.$store.commit("user/SET_LOGINSTATE", true);
@@ -361,6 +361,11 @@ body {
   }
   .menu-body {
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
     flex: 0 0 @menuWidth;
     width: @menuWidth;
     height: calc(100% - @headerHeight);

src/store/index.js

@@ -13,6 +13,7 @@ const state = {
   menuData: [],
   windturbineMap: {},
   moudleName: localStorage.getItem("ModuleName") || "",
+  isFixed: JSON.parse(localStorage.getItem("isFixed")) || false,
 };
 
 //改变状态的方法`
@@ -20,6 +21,10 @@ const mutations = {
   loadingStore(state, tag) {
     state.loading = tag;
   },
+  changeIsFixed(state, isFixed) {
+    state.isFixed = isFixed;
+    localStorage.setItem("isFixed", isFixed);
+  },
   changeTheme(state, tag) {
     state.themeName = tag;
   },

src/views/layout/Menu.vue

@@ -81,6 +81,14 @@
       </li>
     </ul>
   </div>
+  <div
+    class="icon-fixed svg-icon"
+    :class="fixed ? 'svg-icon-green' : 'svg-icon-gray'"
+    @click="handleClickFixed"
+  >
+    <SvgIcon svgid="svg-unfixed" v-if="fixed == false"></SvgIcon>
+    <SvgIcon svgid="svg-fixed" v-if="fixed == true"></SvgIcon>
+  </div>
 </template>
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
@@ -576,9 +584,14 @@ export default {
       parentIndex: null,
       subMenu: [],
       subIndex: null,
+      fixed: false,
     };
   },
   methods: {
+    handleClickFixed() {
+      this.fixed = !this.fixed;
+      this.$store.commit("changeIsFixed", this.fixed);
+    },
     fillterMenuRoutes,
     click(index) {
       this.activeIndex = index;
@@ -668,8 +681,21 @@ export default {
         return [];
       }
     },
+    isFixed() {
+      return JSON.parse(localStorage.getItem("isFixed"));
+    },
   },
   watch: {
+    isFixed: {
+      handler(val) {
+        if (!val) {
+          this.$store.commit("changeIsFixed", false);
+        } else {
+          this.fixed = val;
+        }
+      },
+      immediate: true,
+    },
     // 监听路由
     $route: {
       handler: function (val, oldVal) {
@@ -802,4 +828,7 @@ export default {
     color: rgba(255, 255, 255, 50%);
   }
 }
+.icon-fixed {
+  padding-bottom: 20px;
+}
 </style>