feat: 加上页面切换loading,loading改为加在page上

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <el-config-provider :locale="settingStore.elLocale" :size="settingStore.themeConfig.size">
     <router-view v-slot="{ Component }">
-      <me-component :is="Component" done-progress></me-component>
+      <me-component :is="Component" done-progress close-loading></me-component>
     </router-view>
   </el-config-provider>
 </template>

src/components/meComponent.ts

@@ -3,6 +3,7 @@ import { MeKeepAliveProps, default as MeKeepAlive } from './meKeepAlive';
 import { useLoadMessages } from '@/locales/i18n';
 import { done } from '@/utils/nProgress';
 import { localeConfig } from '@/config';
+import { closeLoading } from '@/utils/loading';
 export default defineComponent({
   name: 'MeComponent',
   props: {
@@ -12,6 +13,7 @@ export default defineComponent({
     keepAlive: Object as PropType<MeKeepAliveProps>,
     componentKey: [Number, String, Symbol],
     doneProgress: Boolean,
+    closeLoading: Boolean,
     transition: Object as PropType<TransitionProps>,
   },
   setup(props, { attrs }) {
@@ -27,9 +29,8 @@ export default defineComponent({
           componentIs.value = is;
           key.value = props.componentKey;
           _attrs.value = attrs;
-          if (props.doneProgress) {
-            done();
-          }
+          props.doneProgress && done();
+          props.closeLoading && closeLoading();
         }
       },
       { immediate: true },

src/layout/components/page.vue

@@ -6,6 +6,7 @@
       :keep-alive="keepAliveProps"
       :component-key="route.fullPath"
       done-progress
+      close-loading
     >
     </me-component>
   </router-view>

src/layout/index.vue

@@ -10,7 +10,7 @@
       <el-main class="right-main">
         <el-scrollbar view-class="me-right-main-view">
           <layout-header v-if="!themeConfig.fixedHeader"></layout-header>
-          <div class="me-main">
+          <div v-loading="globalStore.layoutLoading" class="me-main" v-bind="globalStore.layoutLoadingOptions">
             <layout-page :transition="{ name: 'fade-transform', mode: 'out-in' }"></layout-page>
           </div>
         </el-scrollbar>
@@ -38,6 +38,9 @@ import LayoutPage from './components/page.vue';
 import { useSettingStore, useGlobalStore } from '@/store';
 const { themeConfig } = useSettingStore();
 const globalStore = useGlobalStore();
+onMounted(() => {
+  nextTick(() => (globalStore.layoutLoaded = true));
+});
 </script>
 <style lang="scss" scoped>
 .layout {

src/router/guard/index.ts

@@ -3,6 +3,7 @@ import { PageEnum } from '@/enums/pageEnum';
 import { useUserStore } from '@/store';
 import { event, mitter } from '@/event';
 import { start } from '@/utils/nProgress';
+import { loading } from '@/utils/loading';
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
   createPermissionGuard(router);
@@ -27,10 +28,11 @@ function createPermissionGuard(router: Router) {
   });
 }
 
-// 处理页面加载进度条
+// 处理页面加载进度条和loading
 function createProgressGuard(router: Router) {
   router.beforeEach(async (to) => {
     start(to.matched.length);
+    loading({}, to.matched.length);
     return true;
   });
 }

src/store/modules/global.ts

@@ -1,5 +1,7 @@
 import { Composer } from 'vue-i18n';
 import { event, mitter } from '@/event';
+import { LoadingOptions } from 'element-plus';
+import { forOwn } from 'lodash-es';
 const WIDTH = 992; // refer to Bootstrap's responsive design
 const isMobile = ref(window.document.body.offsetWidth < WIDTH);
 mitter.on(event.RESIZE, () => {
@@ -25,6 +27,21 @@ export default defineStore('global', {
         };
       }),
       isMobile,
+      loadingOptions: undefined as undefined | LoadingOptions,
+      layoutLoaded: false,
     };
   },
+  getters: {
+    layoutLoading: (state) => Boolean(state.loadingOptions),
+    layoutLoadingOptions() {
+      if (!this.loadingOptions) {
+        return {};
+      }
+      const options = {} as { [key in keyof LoadingOptions as `element-loading-${key}`]: LoadingOptions[key] };
+      forOwn(this.loadingOptions, function (value, key) {
+        options[('element-loading-' + key) as keyof typeof options] = value as any;
+      });
+      return options;
+    },
+  },
 });

src/utils/loading.ts

@@ -1,37 +1,62 @@
-import { throttle } from 'lodash-es';
-
-let number = 0;
+import { useGlobalStore } from '@/store';
+import { LoadingOptions } from 'element-plus';
+import { throttle, transform } from 'lodash-es';
 let loadingInstance: ReturnType<typeof ElLoading.service>;
-
-// 全局加载
-export function loading(options?: Parameters<typeof ElLoading.service>[0]): void {
-  number++;
-  loadingInstance = ElLoading.service(options);
+class Loading {
+  constructor(private execLoading: (options?: LoadingOptions) => void, private execClose: () => void) {
+    this.execLoading = execLoading;
+    this.execClose = execClose;
+  }
+  private number = 0;
+  loading(options?: LoadingOptions, number = 1) {
+    this.number += number;
+    this.execLoading(options);
+  }
+  throttleClose = throttle(
+    function (this: Loading) {
+      if (this.number <= 0) {
+        this.execClose();
+        this.number = 0;
+      }
+    },
+    220,
+    { leading: false },
+  );
+  close(number = 1) {
+    if (this.number > 0) {
+      this.number -= number;
+      this.throttleClose();
+    }
+  }
+  forceClose() {
+    this.number = 0;
+    loadingInstance.close();
+    this.throttleClose.cancel();
+  }
+}
+const globalLoading = new Loading(
+  (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
+  () => loadingInstance.close(),
+);
+const layoutLoading = new Loading(
+  (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
+  () => (useGlobalStore().loadingOptions = undefined),
+);
+function getLoading(forceGlobal = false) {
+  if (!forceGlobal && useGlobalStore().layoutLoaded) {
+    return layoutLoading;
+  }
+  return globalLoading;
 }
 
-// 关闭操作
-const close = throttle(
-  () => {
-    if (number <= 0) {
-      loadingInstance.close();
-      number = 0;
-    }
-  },
-  220,
-  { leading: false },
-); // 220毫秒后关闭防闪烁
+export function loading(options?: LoadingOptions, number = 1, forceGlobal = false): void {
+  getLoading(forceGlobal).loading(options, number);
+}
 
-// 关闭加载会判断已展示加载次数 当全部关闭后执行关闭操作
-export function closeLoading(force = false): void {
-  if (number <= 0) {
-    return;
-  }
+export function closeLoading(force = false, number = 1, forceGlobal = false): void {
   if (force) {
-    loadingInstance.close();
-    number = 0;
-    close.cancel();
+    getLoading(forceGlobal).forceClose();
     return;
   }
-  number--;
-  close();
+  getLoading(forceGlobal).close(number);
 }