Ver Fonte

fix: 修复路由`meta.transition.name`配置无效的问题

xiaoxian521 há 1 ano atrás
pai
commit
984bddbde2
1 ficheiros alterados com 11 adições e 13 exclusões
  1. 11 13
      src/layout/components/appMain.vue

+ 11 - 13
src/layout/components/appMain.vue

@@ -40,22 +40,20 @@ const getSectionStyle = computed(() => {
 
 
 const transitionMain = defineComponent({
 const transitionMain = defineComponent({
   render() {
   render() {
+    const transitionName =
+      transitions.value(this.route)?.name || "fade-transform";
+    const enterTransition = transitions.value(this.route)?.enterTransition;
+    const leaveTransition = transitions.value(this.route)?.leaveTransition;
     return h(
     return h(
       Transition,
       Transition,
       {
       {
-        name:
-          transitions.value(this.route) &&
-          this.route.meta.transition.enterTransition
-            ? "pure-classes-transition"
-            : (transitions.value(this.route) &&
-                this.route.meta.transition.name) ||
-              "fade-transform",
-        enterActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.enterTransition}`,
-        leaveActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.leaveTransition}`,
+        name: enterTransition ? "pure-classes-transition" : transitionName,
+        enterActiveClass: enterTransition
+          ? `animate__animated ${enterTransition}`
+          : undefined,
+        leaveActiveClass: leaveTransition
+          ? `animate__animated ${leaveTransition}`
+          : undefined,
         mode: "out-in",
         mode: "out-in",
         appear: true
         appear: true
       },
       },