tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(AppMain): ♻️ 添加页面切换动画, CSS 精简优化

Browse Source
This commit is contained in:
郝先瑞
2024-02-23 10:37:37 +08:00
parent 68b76b82cf
commit 66f37cb31d
1 changed files with 20 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/layout/components/AppMain/index.vue
View File

@@ -2,7 +2,10 @@
<section class="app-main"> <section class="app-main">
<router-view> <router-view>
<template #default="{ Component, route }"> <template #default="{ Component, route }">
<transition mode="out-in"> <transition
enter-active-class="animate__animated animate__slideInLeft"
mode="out-in"
>
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" /> <component :is="Component" :key="route.path" />
</keep-alive> </keep-alive>
@@ -14,9 +17,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useTagsViewStore } from "@/store"; import { useTagsViewStore } from "@/store";
const tagsViewStore = useTagsViewStore();
const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面集合 const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -34,54 +36,40 @@ const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面
} }
.hasTagsView { .hasTagsView {
.app-main { .app-main,
/* 84 = navbar + tags-view = 50 + 34 */ .fixed-header + .app-main {
min-height: calc(100vh - $navbar-height - $tags-view-height); min-height: calc(100vh - $navbar-height - $tags-view-height);
} }
.fixed-header + .app-main { .fixed-header + .app-main {
min-height: 100vh;
padding-top: $navbar-height + $tags-view-height; padding-top: $navbar-height + $tags-view-height;
} }
} }
.layout-mix,
.layout-top {
.fixed-header + .app-main {
padding-top: 0;
}
}
.layout-mix { .layout-mix {
.app-main { .app-main {
height: calc(100vh - $navbar-height); height: calc(100vh - $navbar-height);
min-height: calc(100vh - $navbar-height);
padding-top: 0; padding-top: 0;
overflow-y: auto; overflow-y: auto;
} }
.fixed-header + .app-main { .hasTagsView .app-main,
min-height: calc(100vh - $navbar-height); .hasTagsView .fixed-header + .app-main {
padding-top: 0; height: calc(100vh - $navbar-height - $tags-view-height);
} padding-top: $tags-view-height;
.hasTagsView {
.app-main {
height: calc(100vh - $navbar-height - $tags-view-height);
min-height: calc(100vh - $navbar-height - $tags-view-height);
}
.fixed-header + .app-main {
min-height: calc(100vh - $navbar-height);
padding-top: $tags-view-height;
}
} }
} }
.layout-top { .layout-top {
.fixed-header + .app-main { .hasTagsView .fixed-header + .app-main {
min-height: calc(100vh - $navbar-height); padding-top: $tags-view-height;
padding-top: 0;
}
.hasTagsView {
.fixed-header + .app-main {
min-height: calc(100vh - $navbar-height);
padding-top: $tags-view-height;
}
} }
} }
</style> </style>