fix(projects): 修复页面缓存,添加多页签删除

This commit is contained in:
Soybean
2021-09-17 23:44:28 +08:00
parent f29bc05dd9
commit 248937479c
8 changed files with 86 additions and 75 deletions

View File

@ -1,31 +1,21 @@
<template>
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
<div class="inline-block w-full" :class="[fullPage ? 'h-full' : 'min-h-100vh']">
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
<router-view v-slot="{ Component }">
<keep-alive v-if="keepAlive">
<component :is="Component" />
<keep-alive>
<component :is="Component" v-if="routeProps.keepAlive" :key="routeProps.name" />
</keep-alive>
<component :is="Component" v-else />
<component :is="Component" v-if="!routeProps.keepAlive" :key="routeProps.name" />
</router-view>
</div>
</n-scrollbar>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { NScrollbar } from 'naive-ui';
import { computed } from 'vue';
import { useScrollBehavior } from '@/hooks';
import { useRouteProps, useScrollBehavior } from '../composables';
const route = useRoute();
const { scrollbar, resetScrollWatcher } = useScrollBehavior();
/** 缓存页面 */
const keepAlive = computed(() => Boolean(route.meta?.keepAlive));
/** 100%视高 */
const fullPage = computed(() => Boolean(route.meta?.fullPage));
resetScrollWatcher();
const { scrollbar } = useScrollBehavior();
const routeProps = useRouteProps();
</script>
<style scoped></style>