mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-10-10 03:46:37 +08:00
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { useRouteStore } from '@/store/modules/route';
|
|
|
|
defineOptions({
|
|
name: 'GlobalContent'
|
|
});
|
|
|
|
interface Props {
|
|
/** Show padding for content */
|
|
showPadding?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showPadding: true
|
|
});
|
|
|
|
const appStore = useAppStore();
|
|
const themeStore = useThemeStore();
|
|
const routeStore = useRouteStore();
|
|
|
|
const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
|
|
</script>
|
|
|
|
<template>
|
|
<RouterView v-slot="{ Component, route }">
|
|
<Transition
|
|
:name="transitionName"
|
|
mode="out-in"
|
|
@before-leave="appStore.setContentXScrollable(true)"
|
|
@after-enter="appStore.setContentXScrollable(false)"
|
|
>
|
|
<KeepAlive :include="routeStore.cacheRoutes">
|
|
<component
|
|
:is="Component"
|
|
v-if="appStore.reloadFlag"
|
|
:key="route.path"
|
|
:class="{ 'p-16px': showPadding }"
|
|
class="flex-grow bg-layout transition-300"
|
|
/>
|
|
</KeepAlive>
|
|
</Transition>
|
|
</RouterView>
|
|
</template>
|
|
|
|
<style></style>
|