Blame view

Yi.Vben5.Vue3/packages/effects/layouts/src/basic/content/use-content-spinner.ts 1.17 KB
515fceeb   “wangming”   框架初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  import { preferences } from '@vben/preferences';
  
  function useContentSpinner() {
    const spinning = ref(false);
    const startTime = ref(0);
    const router = useRouter();
    const minShowTime = 500; // 最小显示时间
    const enableLoading = computed(() => preferences.transition.loading);
  
    // 结束加载动画
    const onEnd = () => {
      if (!enableLoading.value) {
        return;
      }
      const processTime = performance.now() - startTime.value;
      if (processTime < minShowTime) {
        setTimeout(() => {
          spinning.value = false;
        }, minShowTime - processTime);
      } else {
        spinning.value = false;
      }
    };
  
    // 路由前置守卫
    router.beforeEach((to) => {
      if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
        return true;
      }
      startTime.value = performance.now();
      spinning.value = true;
      return true;
    });
  
    // 路由后置守卫
    router.afterEach((to) => {
      if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
        return true;
      }
      onEnd();
      return true;
    });
  
    return { spinning };
  }
  
  export { useContentSpinner };