Blame view

src/layouts/page/index.tsx 2.28 KB
陈文彬 authored
1
2
3
4
5
6
7
8
import { computed, defineComponent, unref, Transition, KeepAlive, toRaw } from 'vue';

import { appStore } from '/@/store/modules/app';

import { useTransition } from './useTransition';

import { RouterView, RouteLocation } from 'vue-router';
import { tabStore } from '/@/store/modules/tab';
9
import FrameLayout from '/@/layouts/iframe/index.vue';
陈文彬 authored
10
11
import { useSetting } from '/@/hooks/core/useSetting';
陈文彬 authored
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'PageLayout',
  setup() {
    // const { currentRoute } = useRouter();
    const getProjectConfigRef = computed(() => {
      return appStore.getProjectConfig;
    });
    const { openPageLoading } = unref(getProjectConfigRef);

    let on = {};
    if (openPageLoading) {
      const { on: transitionOn } = useTransition();
      on = transitionOn;
    }
27
    const { projectSetting } = useSetting();
陈文彬 authored
28
29
30
31
32
33
34
35
36
37
    return () => {
      const {
        routerTransition,
        openRouterTransition,
        openKeepAlive,
        multiTabsSetting: { show, max },
      } = unref(getProjectConfigRef);

      const openCache = openKeepAlive && show;
      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
38
39
40
41
42
      return (
        <div>
          <RouterView>
            {{
              default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
vben authored
43
44
                // 已经位于tab内的不再显示动画
                const name = route.meta.inTab ? 'fade' : null;
45
46
47
48
49
                const Content = openCache ? (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Component {...route.params} />
                  </KeepAlive>
                ) : (
陈文彬 authored
50
                  <Component {...route.params} />
51
52
53
54
                );
                return openRouterTransition ? (
                  <Transition
                    {...on}
55
                    name={name || route.meta.transitionName || routerTransition}
56
                    mode="out-in"
vben authored
57
                    appear={true}
58
59
60
61
62
63
64
65
66
67
68
69
                  >
                    {() => Content}
                  </Transition>
                ) : (
                  Content
                );
              },
            }}
          </RouterView>
          {projectSetting.canEmbedIFramePage && <FrameLayout />}
        </div>
      );
陈文彬 authored
70
71
72
    };
  },
});