GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): reset scroll position when tab change

Browse Source
This commit is contained in:
Soybean 2024-06-11 19:04:07 +08:00
parent 6259287240
commit 9094b21cbb
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/layouts/modules/global-content/index.vue
View File

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