fix: Page switching display is abnormal

This commit is contained in:
vben
2024-06-23 19:55:55 +08:00
parent 16ed5a05ba
commit 89586ef2c4
5 changed files with 10 additions and 32 deletions

View File

@@ -12,7 +12,7 @@ defineOptions({ name: 'LayoutContent' });
const { keepAlive } = usePreferences();
const tabsStore = useTabsStore();
const { onTransitionEnd, spinning } = useContentSpinner();
const { spinning } = useContentSpinner();
const { getCacheTabs, getExcludeTabs, renderRouteView } =
storeToRefs(tabsStore);
@@ -51,12 +51,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
/>
<IFrameRouterView />
<RouterView v-slot="{ Component, route }">
<Transition
:name="getTransitionName(route)"
appear
mode="out-in"
@transitionend="onTransitionEnd"
>
<Transition :name="getTransitionName(route)" appear mode="out-in">
<KeepAlive
v-if="keepAlive"
:exclude="getExcludeTabs"

View File

@@ -5,7 +5,6 @@ import { preferences } from '@vben-core/preferences';
function useContentSpinner() {
const spinning = ref(false);
const isStartTransition = ref(false);
const startTime = ref(0);
const router = useRouter();
const minShowTime = 500;
@@ -29,7 +28,6 @@ function useContentSpinner() {
if (to.meta.loaded || !enableLoading.value) {
return true;
}
isStartTransition.value = false;
startTime.value = performance.now();
spinning.value = true;
return true;
@@ -40,17 +38,13 @@ function useContentSpinner() {
return true;
}
// 未进入过渡动画
if (!isStartTransition.value) {
// 关闭加载动画
onEnd();
}
// 关闭加载动画
onEnd();
isStartTransition.value = false;
return true;
});
return { onTransitionEnd: onEnd, spinning };
return { spinning };
}
export { useContentSpinner };

View File

@@ -181,7 +181,7 @@ preferences:
name: 动画
loading: 页面切换 Loading
transition: 页面切换动画
progress: 页面加载进度条
progress: 页面切换进度条
theme:
name: 主题
builtin: 内置主题