Merge pull request #47 from maxbad/v2.0

修复transition组件导致的白屏(重现: 热更新transition下的组件script代码切换tab即可)
This commit is contained in:
孟帅 2023-08-15 16:37:56 +08:00 committed by GitHub
commit 9f91977a0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions

View File

@ -136,7 +136,7 @@
import { deepMerge } from '@/utils'; import { deepMerge } from '@/utils';
export default defineComponent({ export default defineComponent({
name: 'BasicUpload', name: 'BasicForm',
components: { DownOutlined, UpOutlined, QuestionCircleOutlined }, components: { DownOutlined, UpOutlined, QuestionCircleOutlined },
props: { props: {
...basicProps, ...basicProps,

View File

@ -2,18 +2,26 @@
<RouterView> <RouterView>
<template #default="{ Component, route }"> <template #default="{ Component, route }">
{{ retryKeepAlive(route) }} {{ retryKeepAlive(route) }}
<transition :name="getTransitionName" mode="out-in" appear> <template v-if="mode === 'production'">
<keep-alive v-if="keepAliveComponents" :include="keepAliveComponents"> <transition :name="getTransitionName" appear mode="out-in">
<keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<component :is="Component" v-else :key="route.fullPath" />
</transition>
</template>
<template v-else>
<keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath" />
</keep-alive> </keep-alive>
<component v-else :is="Component" :key="route.fullPath" /> <component :is="Component" v-else :key="route.fullPath" />
</transition> </template>
</template> </template>
</RouterView> </RouterView>
</template> </template>
<script> <script>
import { defineComponent, computed, unref } from 'vue'; import { computed, defineComponent, unref } from 'vue';
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'; import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'; import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -72,11 +80,12 @@
} }
} }
} }
const mode = import.meta.env.MODE;
return { return {
keepAliveComponents, keepAliveComponents,
getTransitionName, getTransitionName,
retryKeepAlive, retryKeepAlive,
mode,
}; };
}, },
}); });