From aa0653e7e41450d2be9b950b00775f9bd5d64800 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Thu, 28 Jan 2021 18:31:25 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.01.28:=E5=A4=84=E7=90=86=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E6=89=8B=E6=9C=BA=E3=80=81=E5=B9=B3=E6=9D=BF=E7=AD=89?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/layout/index.vue                | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/vue-admin-wonderful-next/src/views/layout/index.vue b/vue-admin-wonderful-next/src/views/layout/index.vue
index 90c24db..dd0d40d 100644
--- a/vue-admin-wonderful-next/src/views/layout/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/index.vue
@@ -6,8 +6,15 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeMount, onMounted, onUnmounted } from "vue";
 import { useStore } from "/@/store/index.ts";
+import {
+  setLocal,
+  getLocal,
+  setSession,
+  getSession,
+  removeSession,
+} from "/@/utils/storage.ts";
 import Defaults from "/@/views/layout/main/defaults.vue";
 import Classic from "/@/views/layout/main/classic.vue";
 import Transverse from "/@/views/layout/main/transverse.vue";
@@ -17,9 +24,41 @@ export default {
   components: { Defaults, Classic, Transverse, Columns },
   setup() {
     const store = useStore();
+    // 获取布局配置信息
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
+    // 窗口大小改变时
+    const onLayoutResize = () => {
+      const clientWidth = document.body.clientWidth;
+      console.log(clientWidth);
+      if (clientWidth < 1000) {
+        if (getLocal("themeConfig").layout === "defaults") return false;
+        setSession("oldThemeConfig", getLocal("themeConfig"));
+        const config = getLocal("themeConfig");
+        config.layout = "defaults";
+        console.log(config);
+        setLocal("themeConfig", config);
+      } else {
+        if (
+          getLocal("themeConfig").layout === getSession("oldThemeConfig").layout
+        )
+          return false;
+        setLocal("themeConfig", getSession("oldThemeConfig"));
+      }
+    };
+    // 页面加载前
+    onBeforeMount(() => {
+      window.addEventListener("resize", onLayoutResize);
+    });
+    // 页面加载时
+    onMounted(() => {
+      onLayoutResize();
+    });
+    // 页面卸载时
+    onUnmounted(() => {
+      window.removeEventListener("resize", onLayoutResize);
+    });
     return {
       getThemeConfig,
     };