'admin-21.01.06:处理页面滚动条问题'

vue-admin-wonderful-next/src/store/index.ts

@@ -19,9 +19,11 @@ export interface RootStateTypes {
         isCollapse: boolean,
         isUniqueOpened: boolean,
         isFixedHeader: boolean,
+        isFixedHeaderChange: boolean,
         isCollapse1: boolean,
         menuWidth1: number,
-        isShowLogo: boolean
+        isShowLogo: boolean,
+        isShowLogoChange: boolean
     }
 }
 

vue-admin-wonderful-next/src/theme/app.scss

@@ -36,6 +36,7 @@ body,
     z-index: 1;
     display: flex;
     flex-direction: column;
+    overflow-x: hidden !important;
   }
   .el-header {
     box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -16,7 +16,9 @@ export default {
     isCollapse: false,
     isUniqueOpened: false,
     isFixedHeader: false,
+    isFixedHeaderChange: false,
     isCollapse1: false,
     menuWidth1: 200,
-    isShowLogo: false
+    isShowLogo: false,
+    isShowLogoChange: false
 }

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -71,7 +71,9 @@ export default {
       return store.state.themeConfig;
     });
     watch(store.state.themeConfig, (val) => {
-      proxy.$refs.layoutAsideScrollbarRef.update();
+      if (val.isShowLogoChange !== val.isShowLogo) {
+        proxy.$refs.layoutAsideScrollbarRef.update();
+      }
     });
     return {
       getThemeConfig,

vue-admin-wonderful-next/src/views/layout/component/main.vue

@@ -43,7 +43,9 @@ export default defineComponent({
         to.meta.index > from.meta.index ? "slide-right" : "slide-left";
     });
     watch(store.state.themeConfig, (val) => {
-      proxy.$refs.layoutScrollbarRef.update();
+      if (val.isFixedHeaderChange !== val.isFixedHeader) {
+        proxy.$refs.layoutScrollbarRef.update();
+      }
     });
     return {
       getThemeConfig,

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout-breadcrumb-seting">
-    <el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px">
+    <el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
+      @close="onDrawerClose">
       <el-scrollbar class="layout-breadcrumb-seting-bar">
         <!-- 全局主题 -->
         <el-divider content-position="left">全局主题</el-divider>
@@ -100,13 +101,13 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isUniqueOpened" @change="onsetThemeConfigChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isUniqueOpened"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isFixedHeader"></el-switch>
+            <el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -129,7 +130,7 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isShowLogo" @change="onsetThemeConfigChange"></el-switch>
+            <el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -341,11 +342,23 @@ export default defineComponent({
       });
     };
     const onThemeConfigChange = () => {
-      store.dispatch("setThemeConfig", getThemeConfig.value);
       onMenuBarHighlightChange();
     };
-    const onsetThemeConfigChange = () => {
+    const onIsFixedHeaderChange = () => {
-      store.dispatch("setThemeConfig", getThemeConfig.value);
+      getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
+        .isFixedHeader
+        ? false
+        : true;
+    };
+    const onIsShowLogoChange = () => {
+      getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
+        ? false
+        : true;
+    };
+    const onDrawerClose = () => {
+      // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+      getThemeConfig.value.isFixedHeaderChange = false;
+      getThemeConfig.value.isShowLogoChange = false;
     };
     onBeforeMount(() => {
       proxy.mittBus.on("onMenuClick", () => {
@@ -364,8 +377,10 @@ export default defineComponent({
       onMenuBarGradualChange,
       onMenuBarHighlightChange,
       onThemeConfigChange,
-      onsetThemeConfigChange,
+      onIsFixedHeaderChange,
+      onIsShowLogoChange,
       getThemeConfig,
+      onDrawerClose,
     };
   },
 });