bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-04-30 22:29:01 +08:00
Code

fix: 修复keepAlive页面transition不生效问题, close #93

Browse Source
This commit is contained in:
zclzone 2024-09-03 09:02:17 +08:00
parent 615c3b63f7
commit 3359b0f2b5
3 changed files with 41 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -16,9 +16,11 @@
> >
<router-view v-if="Layout" v-slot="{ Component, route: curRoute }"> <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
<component :is="Layout"> <component :is="Layout">
<transition name="fade-slide" mode="out-in" appear>
<KeepAlive :include="keepAliveNames"> <KeepAlive :include="keepAliveNames">
<component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" /> <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
</KeepAlive> </KeepAlive>
</transition>
</component> </component>
<LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" /> <LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" />

2
src/components/common/AppPage.vue
View File

@ -8,11 +8,9 @@
<template> <template>
<main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212"> <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
<transition name="fade-slide" mode="out-in" appear>
<main :class="{ 'flex-1': full }" class="m-12"> <main :class="{ 'flex-1': full }" class="m-12">
<slot /> <slot />
</main> </main>
</transition>
<slot v-if="$slots.footer" name="footer" /> <slot v-if="$slots.footer" name="footer" />
<TheFooter v-else-if="showFooter" class="mb-12 mt-auto" /> <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
<n-back-top :bottom="20" /> <n-back-top :bottom="20" />

12
src/components/common/CommonPage.vue
View File

@ -7,8 +7,7 @@
---------------------------------> --------------------------------->
<template> <template>
<main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212"> <main class="h-full flex-col flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
<div class="h-full flex-col">
<AppCard <AppCard
v-if="showHeader" v-if="showHeader"
class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24" class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
@ -36,20 +35,15 @@
<slot name="action" /> <slot name="action" />
</template> </template>
</AppCard> </AppCard>
<transition name="fade-slide" mode="out-in" appear>
<AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered> <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
<slot /> <slot />
</AppCard> </AppCard>
</transition>
</div>
</main>
<footer class="bg-#f5f6fb dark:bg-#121212">
<slot v-if="$slots.footer" name="footer" /> <slot v-if="$slots.footer" name="footer" />
<AppCard v-else-if="showFooter" class="py-12"> <AppCard v-else-if="showFooter" class="flex-shrink-0 py-12">
<TheFooter /> <TheFooter />
</AppCard> </AppCard>
</footer> </main>
</template> </template>
<script setup> <script setup>