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

8
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">
<KeepAlive :include="keepAliveNames"> <transition name="fade-slide" mode="out-in" appear>
<component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" /> <KeepAlive :include="keepAliveNames">
</KeepAlive> <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
</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" />

8
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" />

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

@ -7,49 +7,43 @@
---------------------------------> --------------------------------->
<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" border-b="1px solid light_border dark:dark_border"
border-b="1px solid light_border dark:dark_border" >
> <slot v-if="$slots.header" name="header" />
<slot v-if="$slots.header" name="header" /> <template v-else>
<template v-else> <div class="flex items-center">
<div class="flex items-center"> <slot v-if="$slots['title-prefix']" name="title-prefix" />
<slot v-if="$slots['title-prefix']" name="title-prefix" /> <template v-else-if="back">
<template v-else-if="back"> <div
<div class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40" @click="router.back()"
@click="router.back()" >
> <i class="i-material-symbols:arrow-left-alt" />
<i class="i-material-symbols:arrow-left-alt" /> <span class="ml-4">返回</span>
<span class="ml-4">返回</span> </div>
</div> </template>
</template> <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
<div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" /> <h2 class="font-normal">
<h2 class="font-normal"> {{ title ?? route.meta?.title }}
{{ title ?? route.meta?.title }} </h2>
</h2> <slot name="title-suffix" />
<slot name="title-suffix" /> </div>
</div> <slot name="action" />
<slot name="action" /> </template>
</template> </AppCard>
</AppCard> <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
<transition name="fade-slide" mode="out-in" appear> <slot />
<AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered> </AppCard>
<slot />
</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>