index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <section class="app-main">
  3. <router-view v-slot="{ Component, route }">
  4. <transition
  5. enter-active-class="animate__animated animate__fadeIn"
  6. mode="out-in"
  7. >
  8. <keep-alive :include="cachedViews">
  9. <div class="main-container">
  10. <component :is="Component" :key="route.path" />
  11. </div>
  12. </keep-alive>
  13. </transition>
  14. </router-view>
  15. </section>
  16. </template>
  17. <script setup lang="ts">
  18. import { useTagsViewStore } from "@/store";
  19. const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
  20. console.log(useTagsViewStore().cachedViews, "kep");
  21. </script>
  22. <style lang="scss" scoped>
  23. .app-main {
  24. position: relative;
  25. width: 100%;
  26. min-height: calc(100vh - $navbar-height);
  27. overflow: hidden;
  28. // background-color: var(--el-bg-color-page);
  29. background-color: #f5f9ff;
  30. }
  31. .hasTagsView .app-main {
  32. min-height: calc(100vh - $navbar-height - $tags-view-height);
  33. }
  34. .fixed-header + .app-main {
  35. min-height: 100vh;
  36. padding-top: $navbar-height;
  37. }
  38. .hasTagsView .fixed-header + .app-main {
  39. min-height: 100vh;
  40. padding-top: $navbar-height + $tags-view-height;
  41. }
  42. .layout-mix,
  43. .layout-top {
  44. .fixed-header + .app-main {
  45. padding-top: 0;
  46. }
  47. }
  48. .layout-mix {
  49. .app-main {
  50. height: calc(100vh - $navbar-height);
  51. padding-top: 0;
  52. overflow-y: auto;
  53. }
  54. .hasTagsView .app-main {
  55. height: calc(100vh - $navbar-height - $tags-view-height);
  56. min-height: calc(100vh - $navbar-height - $tags-view-height);
  57. }
  58. .fixed-header + .app-main {
  59. min-height: calc(100vh - $navbar-height);
  60. }
  61. .hasTagsView .fixed-header + .app-main {
  62. height: calc(100vh - $navbar-height);
  63. min-height: calc(100vh - $navbar-height);
  64. padding-top: $tags-view-height;
  65. }
  66. }
  67. .layout-top {
  68. .hasTagsView .fixed-header + .app-main {
  69. padding-top: $tags-view-height;
  70. }
  71. }
  72. .main-container {
  73. padding: 10px;
  74. height: calc(100vh - 86px);
  75. overflow: auto;
  76. }
  77. </style>