perf: 优化关闭页面切换动画的tab切换性能 (#5883)

This commit is contained in:
ming4762 2025-04-08 20:27:03 +08:00 committed by GitHub
parent ed26dca64e
commit c9014d0338
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>