perf: 优化关闭页面切换动画的tab切换性能 (#5883)
This commit is contained in:
parent
ed26dca64e
commit
c9014d0338
@ -5,6 +5,7 @@ import type {
|
|||||||
RouteLocationNormalizedLoadedGeneric,
|
RouteLocationNormalizedLoadedGeneric,
|
||||||
} from 'vue-router';
|
} from 'vue-router';
|
||||||
|
|
||||||
|
import { computed } from 'vue';
|
||||||
import { RouterView } from 'vue-router';
|
import { RouterView } from 'vue-router';
|
||||||
|
|
||||||
import { preferences, usePreferences } from '@vben/preferences';
|
import { preferences, usePreferences } from '@vben/preferences';
|
||||||
@ -20,6 +21,15 @@ const { keepAlive } = usePreferences();
|
|||||||
const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
|
const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
|
||||||
storeToRefs(tabbarStore);
|
storeToRefs(tabbarStore);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否使用动画
|
||||||
|
*/
|
||||||
|
const getEnabledTransition = computed(() => {
|
||||||
|
const { transition } = preferences;
|
||||||
|
const transitionName = transition.name;
|
||||||
|
return transitionName && transition.enable;
|
||||||
|
});
|
||||||
|
|
||||||
// 页面切换动画
|
// 页面切换动画
|
||||||
function getTransitionName(_route: RouteLocationNormalizedLoaded) {
|
function getTransitionName(_route: RouteLocationNormalizedLoaded) {
|
||||||
// 如果偏好设置未设置,则不使用动画
|
// 如果偏好设置未设置,则不使用动画
|
||||||
@ -90,7 +100,12 @@ function transformComponent(
|
|||||||
<div class="relative h-full">
|
<div class="relative h-full">
|
||||||
<IFrameRouterView />
|
<IFrameRouterView />
|
||||||
<RouterView v-slot="{ Component, route }">
|
<RouterView v-slot="{ Component, route }">
|
||||||
<Transition :name="getTransitionName(route)" appear mode="out-in">
|
<Transition
|
||||||
|
v-if="getEnabledTransition"
|
||||||
|
:name="getTransitionName(route)"
|
||||||
|
appear
|
||||||
|
mode="out-in"
|
||||||
|
>
|
||||||
<KeepAlive
|
<KeepAlive
|
||||||
v-if="keepAlive"
|
v-if="keepAlive"
|
||||||
:exclude="getExcludeCachedTabs"
|
:exclude="getExcludeCachedTabs"
|
||||||
@ -109,6 +124,25 @@ function transformComponent(
|
|||||||
:key="route.fullPath"
|
:key="route.fullPath"
|
||||||
/>
|
/>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
<template v-else>
|
||||||
|
<KeepAlive
|
||||||
|
v-if="keepAlive"
|
||||||
|
:exclude="getExcludeCachedTabs"
|
||||||
|
:include="getCachedTabs"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="transformComponent(Component, route)"
|
||||||
|
v-if="renderRouteView"
|
||||||
|
v-show="!route.meta.iframeSrc"
|
||||||
|
:key="route.fullPath"
|
||||||
|
/>
|
||||||
|
</KeepAlive>
|
||||||
|
<component
|
||||||
|
:is="Component"
|
||||||
|
v-else-if="renderRouteView"
|
||||||
|
:key="route.fullPath"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</RouterView>
|
</RouterView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user