perf: 主界面布局滚动条显示样式处理 (#59)

perf: 主界面布局滚动条采用el-scrollbar
This commit is contained in:
zhuoyue03007 2021-10-18 15:05:23 +08:00 committed by GitHub
parent db4855737b
commit 7f34b63569
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -15,36 +15,38 @@ const transition = computed(() => {
<template>
<section class="app-main">
<router-view>
<template #default="{ Component, route }">
<transition
:name="
transition(route) && route.meta.transition.enterTransition
? 'pure-classes-transition'
: (transition(route) && route.meta.transition.name) ||
'fade-transform'
"
:enter-active-class="
transition(route) &&
`animate__animated ${route.meta.transition.enterTransition}`
"
:leave-active-class="
transition(route) &&
`animate__animated ${route.meta.transition.leaveTransition}`
"
mode="out-in"
appear
>
<keep-alive
v-if="keepAlive"
:include="usePermissionStoreHook().cachePageList"
<el-scrollbar>
<router-view>
<template #default="{ Component, route }">
<transition
:name="
transition(route) && route.meta.transition.enterTransition
? 'pure-classes-transition'
: (transition(route) && route.meta.transition.name) ||
'fade-transform'
"
:enter-active-class="
transition(route) &&
`animate__animated ${route.meta.transition.enterTransition}`
"
:leave-active-class="
transition(route) &&
`animate__animated ${route.meta.transition.leaveTransition}`
"
mode="out-in"
appear
>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<component v-else :is="Component" :key="route.fullPath" />
</transition>
</template>
</router-view>
<keep-alive
v-if="keepAlive"
:include="usePermissionStoreHook().cachePageList"
>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<component v-else :is="Component" :key="route.fullPath" />
</transition>
</template>
</router-view>
</el-scrollbar>
</section>
</template>