lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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