From 3f78b5aa0cd3e7a6f17d58512ca93ee2905d5e2f Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期四, 12 十一月 2020 23:58:44 +0800
Subject: [PATCH] fix: pageLoading not working
---
src/design/var/index.less | 4 +---
src/layouts/default/LayoutContent.tsx | 1 -
src/layouts/page/index.tsx | 22 ++++++++++++++--------
src/layouts/page/useTransition.ts | 1 +
src/router/guard/index.ts | 3 ++-
src/router/guard/pageLoadingGuard.ts | 1 +
6 files changed, 19 insertions(+), 13 deletions(-)
diff --git a/src/design/var/index.less b/src/design/var/index.less
index 4df39e2..6293573 100644
--- a/src/design/var/index.less
+++ b/src/design/var/index.less
@@ -15,7 +15,5 @@
@side-drag-z-index: 200;
@page-loading-z-index: 10000;
-// app menu
-
// left-menu
-@app-menu-item-height: 42px;
+@app-menu-item-height: 46px;
diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx
index 0ab53f9..2944439 100644
--- a/src/layouts/default/LayoutContent.tsx
+++ b/src/layouts/default/LayoutContent.tsx
@@ -16,7 +16,6 @@
return () => {
const { contentMode, openPageLoading } = unref(getProjectConfigRef);
const { getPageLoading } = appStore;
-
const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
return (
<div class={[`default-layout__main`]}>
diff --git a/src/layouts/page/index.tsx b/src/layouts/page/index.tsx
index 68154df..c16d6c5 100644
--- a/src/layouts/page/index.tsx
+++ b/src/layouts/page/index.tsx
@@ -12,9 +12,16 @@
export default defineComponent({
name: 'PageLayout',
setup() {
- const getProjectConfigRef = computed(() => {
- return appStore.getProjectConfig;
+ const getProjectConfigRef = computed(() => appStore.getProjectConfig);
+ const openCacheRef = computed(() => {
+ const {
+ openKeepAlive,
+ multiTabsSetting: { show },
+ } = unref(getProjectConfigRef);
+ return openKeepAlive && show;
});
+ const getCacheTabsRef = computed(() => toRaw(tabStore.getKeepAliveTabsState) as string[]);
+
const { openPageLoading } = unref(getProjectConfigRef);
let on = {};
@@ -27,21 +34,20 @@
const {
routerTransition,
openRouterTransition,
- openKeepAlive,
- multiTabsSetting: { show, max },
+ multiTabsSetting: { max },
} = unref(getProjectConfigRef);
- const openCache = openKeepAlive && show;
- const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
return (
<div>
<RouterView>
{{
default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
// No longer show animations that are already in the tab
- const name = route.meta.inTab ? 'fade' : null;
+ const cacheTabs = unref(getCacheTabsRef);
+ const isInCache = cacheTabs.includes(route.name as string);
+ const name = isInCache && route.meta.inTab ? 'fade' : null;
- const Content = openCache ? (
+ const Content = unref(openCacheRef) ? (
<KeepAlive max={max} include={cacheTabs}>
<Component key={route.fullPath} />
</KeepAlive>
diff --git a/src/layouts/page/useTransition.ts b/src/layouts/page/useTransition.ts
index ed9088d..2c1a594 100644
--- a/src/layouts/page/useTransition.ts
+++ b/src/layouts/page/useTransition.ts
@@ -3,6 +3,7 @@
export function useTransition() {
function handleAfterEnter() {
const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
+
if (!openRouterTransition || !openPageLoading) return;
// Close loading after the route switching animation ends
appStore.setPageLoadingAction(false);
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index d5b1172..0fcb8ef 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -21,6 +21,8 @@
if (removeAllHttpPending) {
axiosCanceler = new AxiosCanceler();
}
+
+ createPageLoadingGuard(router);
router.beforeEach(async (to) => {
// Determine whether the tab has been opened
const isOpen = getIsOpenTab(to.fullPath);
@@ -59,5 +61,4 @@
openNProgress && createProgressGuard(router);
createPermissionGuard(router);
- createPageLoadingGuard(router);
}
diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts
index 189fb60..c9e17f6 100644
--- a/src/router/guard/pageLoadingGuard.ts
+++ b/src/router/guard/pageLoadingGuard.ts
@@ -20,6 +20,7 @@
appStore.commitPageLoadingState(true);
return true;
}
+
if (show && openKeepAlive && !isFirstLoad) {
const tabList = tabStore.getTabsState;
--
Gitblit v1.8.0