fix https://github.com/d2-projects/d2-admin/issues/198

Former-commit-id: a90637e57de8a016135aeb5b4d43d1db78eed7b1 [formerly df1374a5bf87d104dc2f41a1f6eeb6ba075c2923] [formerly a90637e57de8a016135aeb5b4d43d1db78eed7b1 [formerly df1374a5bf87d104dc2f41a1f6eeb6ba075c2923] [formerly a90637e57de8a016135aeb5b4d43d1db78eed7b1 [formerly df1374a5bf87d104dc2f41a1f6eeb6ba075c2923] [formerly df1374a5bf87d104dc2f41a1f6eeb6ba075c2923 [formerly 6b854444d7f338481165fc1c4c999f866282958e [formerly 1371e68396bb244a22bc579bb55f12e5b6c40809]]]]]
Former-commit-id: 1815aa974e40b1de51ad22359615b8d169793ba1
Former-commit-id: 30a07d937aca2e3156551b823c72dea29188314e
Former-commit-id: 4180971ccf5277ea71eb8864df232fc3faf1f4d3 [formerly 8b4d133ffebc9382606ef6bd19c35415a8a88422]
Former-commit-id: 0399bc6935c57909850285c807624a04ed919690
Former-commit-id: c5a7c8f7e5c4b8945a096e8b2a9b362817e3e49b
Former-commit-id: 6195d04a71287b56282310563694e59578ef7f3b
Former-commit-id: 9b75da52937cce80ef16fc6e1ab20777723be3f8
Former-commit-id: 6ec6d677cc099762d68ef23332a5845085aa0c57

src/layout/header-aside/components/header-size/index.vue

@@ -28,27 +28,6 @@ export default {
       ]
     }
   },
-  watch: {
-    // 注意 这里是关键
-    // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
-    value: {
-      handler (val, oldVal) {
-        // https://github.com/d2-projects/d2-admin/pull/129
-        if (oldVal) {
-          // 这个情况在已经加载完页面 用户改变了尺寸时触发
-          this.$ELEMENT.size = val
-          // 由于已经加载过设置 需要清空缓存设置
-          this.pageKeepAliveClean()
-          // 由于已经加载过设置 需要刷新此页面
-          this.$router.replace('/refresh')
-        } else {
-          // 这个情况在刷新页面时触发
-          this.$ELEMENT.size = val
-        }
-      },
-      immediate: true
-    }
-  },
   methods: {
     ...mapMutations({
       pageKeepAliveClean: 'd2admin/page/keepAliveClean'

src/router/index.js

@@ -23,7 +23,17 @@ const router = new VueRouter({
  * 路由拦截
  * 权限验证
  */
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  // 等待数据加载 https://github.com/d2-projects/d2-admin/issues/201
+  await new Promise (resolve => {
+    const timer = setInterval(() => {
+      if (store.state.d2admin.page.openedLoaded) {
+        resolve(clearInterval(timer))
+      }
+    }, 10)
+  })
+  // 等待加载组件尺寸 https://github.com/d2-projects/d2-admin/issues/198
+  await store.dispatch('d2admin/size/isLoaded')
   // 进度条
   NProgress.start()
   // 关闭搜索面板
@@ -55,17 +65,9 @@ router.beforeEach((to, from, next) => {
 
 
 
-router.afterEach(async to => {
+router.afterEach(to => {
   // 进度条
   NProgress.done()
-  // 等待数据加载 https://github.com/d2-projects/d2-admin/issues/201
-  await new Promise (resolve => {
-    const timer = setInterval(() => {
-      if (store.state.d2admin.page.openedLoaded) {
-        resolve(clearInterval(timer))
-      }
-    }, 10)
-  })
   // 多页控制 打开新的页面
   store.dispatch('d2admin/page/open', to)
   // 更改标题

src/store/modules/d2admin/modules/size.js

@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import router from '@/router'
+
 export default {
   namespaced: true,
   state: {
@@ -5,6 +8,30 @@ export default {
     value: '' // medium small mini
   },
   actions: {
+    /**
+     * @description 将当前的设置应用到 element
+     * @param {Boolean} refresh 是否在设置之后刷新页面
+     */
+    apply ({ state, commit }, refresh) {
+      Vue.prototype.$ELEMENT.size = state.value
+      if (refresh) {
+        commit('d2admin/page/keepAliveClean', null, { root: true })
+        router.replace('/refresh')
+      }
+    },
+    /**
+     * @description 确认组件尺寸已经加载 https://github.com/d2-projects/d2-admin/issues/198
+     */
+    isLoaded ({ state }) {
+      if (state.value) return Promise.resolve()
+      return new Promise(resolve => {
+        const timer = setInterval(() => {
+          if (state.value) {
+            resolve(clearInterval(timer))
+          }
+        }, 10)
+      })
+    },
     /**
      * @description 设置尺寸
      * @param {Object} state vuex state
@@ -14,6 +41,8 @@ export default {
       return new Promise(async resolve => {
         // store 赋值
         state.value = size
+        // 应用
+        dispatch('apply', true)
         // 持久化
         await dispatch('d2admin/db/set', {
           dbName: 'sys',
@@ -38,6 +67,8 @@ export default {
           defaultValue: 'default',
           user: true
         }, { root: true })
+        // 应用
+        dispatch('apply')
         // end
         resolve()
       })