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 }">
<component :is="Layout">
<KeepAlive :include="keepAliveNames">
<component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
</KeepAlive>
<transition name="fade-slide" mode="out-in" appear>
<KeepAlive :include="keepAliveNames">
<component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
</KeepAlive>
</transition>
</component>
<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>
<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">
<slot />
</main>
</transition>
<main :class="{ 'flex-1': full }" class="m-12">
<slot />
</main>
<slot v-if="$slots.footer" name="footer" />
<TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
<n-back-top :bottom="20" />

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

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