feat(projects): reset scroll position when tab change

This commit is contained in:
Soybean 2024-06-11 19:04:07 +08:00
parent 6259287240
commit 9094b21cbb

View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
@ -24,6 +25,12 @@ const routeStore = useRouteStore();
const tabStore = useTabStore();
const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
function resetScroll() {
const el = document.querySelector(`#${LAYOUT_SCROLL_EL_ID}`);
el?.scrollTo({ left: 0, top: 0 });
}
</script>
<template>
@ -32,6 +39,7 @@ const transitionName = computed(() => (themeStore.page.animate ? themeStore.page
:name="transitionName"
mode="out-in"
@before-leave="appStore.setContentXScrollable(true)"
@after-leave="resetScroll"
@after-enter="appStore.setContentXScrollable(false)"
>
<KeepAlive :include="routeStore.cacheRoutes">