fix: 修复页面transition切换时出现X轴滚动条的问题

This commit is contained in:
zs 2023-03-22 15:02:53 +08:00
parent bb7448af2c
commit 28b6aed9a0
2 changed files with 10 additions and 8 deletions

View File

@ -1,11 +1,13 @@
<template> <template>
<vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()"> <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()">
<routerView v-slot="{ Component }"> <routerView v-slot="{ Component }">
<transition :name="getTransitionName" mode="out-in" appear> <div class="absolute top-0 bottom-0 w-full overflow-hidden">
<keep-alive v-if="keepAliveComponents" :include="keepAliveComponents"> <transition :name="getTransitionName" mode="out-in" appear>
<component :is="Component" /> <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
</keep-alive> <component :is="Component" />
</transition> </keep-alive>
</transition>
</div>
</routerView> </routerView>
</vanConfigProvider> </vanConfigProvider>
</template> </template>

View File

@ -21,13 +21,13 @@ export const useRouteStore = defineStore({
}, },
}, },
actions: { actions: {
setRouters(routers) { setRouters(routers: RouteRecordRaw[]) {
this.routers = routers; this.routers = routers;
}, },
setMenus(menus) { setMenus(menus: RouteRecordRaw[]) {
this.menus = menus; this.menus = menus;
}, },
setKeepAliveComponents(compNames) { setKeepAliveComponents(compNames: string[]) {
// 设置需要缓存的组件 // 设置需要缓存的组件
this.keepAliveComponents = compNames; this.keepAliveComponents = compNames;
}, },