fix(transition): fix transition not work

vben
1 parent da76f3c7
Showing 8 changed files with 78 additions and 23 deletions
src/components/Loading/index.ts
src/components/Table/src/hooks/useTable.ts
src/layouts/default/content/index.vue
src/layouts/iframe/index.vue
src/layouts/page/ParentView.vue
src/layouts/page/index.tsx
src/layouts/page/transition.ts
src/router/guard/index.ts
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const Loading = createAsyncComponent(() => import('./src/index.vue'));
+// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+// export const Loading = createAsyncComponent(() => import('./src/index.vue'));
  
+import Loading from './src/index.vue';
+
+export { Loading };
 export { useLoading } from './src/useLoading';
 export { createLoading } from './src/createLoading';
@@ -42,6 +42,7 @@ export function useTable(
       },
       {
         immediate: true,
+        deep: true,
       }
     );
   }
@@ -28,7 +28,6 @@
       const { prefixCls } = useDesign('layout-content');
       const { getOpenPageLoading } = useTransitionSetting();
       const { getLayoutContentMode, getPageLoading } = useRootSetting();
-
       return {
         prefixCls,
         getOpenPageLoading,
 <template>
-  <div>
+  <div v-if="showFrame">
     <template v-for="frame in getFramePages" :key="frame.path">
       <FramePage
         v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)"
@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, unref, computed } from 'vue';
   import FramePage from '/@/views/sys/iframe/index.vue';
  
   import { useFrameKeepAlive } from './useFrameKeepAlive';
@@ -19,7 +19,13 @@
     name: 'FrameLayout',
     components: { FramePage },
     setup() {
-      return { ...useFrameKeepAlive() };
+      const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
+
+      const showFrame = computed(() => {
+        return unref(getFramePages).length > 0;
+      });
+
+      return { getFramePages, hasRenderFrame, showIframe, showFrame };
     },
   });
 </script>
@@ -5,10 +5,24 @@
   <div>
     <router-view>
       <template v-slot="{ Component, route }">
-        <keep-alive v-if="openCache" :include="getCaches">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-        <component v-else :is="Component" :key="route.fullPath" />
+        <transition
+          :name="
+            getTransitionName({
+              route,
+              openCache: openCache,
+              enableTransition: getEnableTransition,
+              cacheTabs: getCaches,
+              def: getBasicTransition,
+            })
+          "
+          mode="out-in"
+          appear
+        >
+          <keep-alive v-if="openCache" :include="getCaches">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </transition>
       </template>
     </router-view>
   </div>
@@ -21,6 +35,7 @@
  
   import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
   import { useCache } from './useCache';
+  import { getTransitionName } from './transition';
  
   export default defineComponent({
     parentView: true,
@@ -40,6 +55,7 @@
         getBasicTransition,
         openCache,
         getEnableTransition,
+        getTransitionName,
       };
     },
   });
 import type { FunctionalComponent } from 'vue';
+import type { DefaultContext } from './transition';
  
 import { computed, defineComponent, unref, Transition, KeepAlive } from 'vue';
 import { RouterView, RouteLocation } from 'vue-router';
@@ -10,6 +11,7 @@ import { useRootSetting } from &#39;/@/hooks/setting/useRootSetting&#39;;
 import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 import { useCache } from './useCache';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { getTransitionName } from './transition';
 // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  
 interface DefaultContext {
@@ -32,17 +34,20 @@ export default defineComponent({
  
     return () => {
       return (
-        <div>
+        <>
           <RouterView>
             {{
               default: ({ Component, route }: DefaultContext) => {
                 // No longer show animations that are already in the tab
                 const cacheTabs = unref(getCaches);
-                const isInCache = cacheTabs.includes(route.name as string);
-                const name =
-                  isInCache && route.meta.loaded && unref(getEnableTransition)
-                    ? 'fade-slide'
-                    : null;
+
+                const name = getTransitionName({
+                  route,
+                  openCache: unref(openCache),
+                  enableTransition: unref(getEnableTransition),
+                  cacheTabs,
+                  def: unref(getBasicTransition),
+                });
  
                 // When the child element is the parentView, adding the key will cause the component to be executed multiple times. When it is not parentView, you need to add a key, because it needs to be compatible with the same route carrying different parameters
                 const isParentView = Component?.type.parentView;
@@ -60,11 +65,7 @@ export default defineComponent({
                   return PageContent;
                 }
                 return (
-                  <Transition
-                    name={name || route.meta.transitionName || unref(getBasicTransition)}
-                    mode="out-in"
-                    appear={true}
-                  >
+                  <Transition name={name} mode="out-in" appear={true}>
                     {() => PageContent}
                   </Transition>
                 );
@@ -72,7 +73,7 @@ export default defineComponent({
             }}
           </RouterView>
           {unref(getCanEmbedIFramePage) && <FrameLayout />}
-        </div>
+        </>
       );
     };
   },
+import type { FunctionalComponent } from 'vue';
+import type { RouteLocation } from 'vue-router';
+
+export interface DefaultContext {
+  Component: FunctionalComponent & { type: Indexable };
+  route: RouteLocation;
+}
+
+export function getTransitionName({
+  route,
+  openCache,
+  cacheTabs,
+  enableTransition,
+  def,
+}: Pick<DefaultContext, 'route'> & {
+  enableTransition: boolean;
+  openCache: boolean;
+  def: string;
+  cacheTabs: string[];
+}) {
+  const isInCache = cacheTabs.includes(route.name as string);
+  const transitionName = 'fade-slide';
+  let name: string | null = transitionName;
+
+  if (openCache) {
+    name = isInCache && route.meta.loaded && enableTransition ? transitionName : null;
+  }
+  return name || route.meta.transitionName || def;
+}
@@ -11,11 +11,11 @@ import { createPageGuard } from &#39;./pageGuard&#39;;
  
 export function createGuard(router: Router) {
   createPageGuard(router);
+  createPageLoadingGuard(router);
   createHttpGuard(router);
   createScrollGuard(router);
   createMessageGuard(router);
   createTitleGuard(router);
-  createPageLoadingGuard(router);
   createProgressGuard(router);
   createPermissionGuard(router);
 }