From 7f34b63569af9c943f0147bc63ea84fe32152f82 Mon Sep 17 00:00:00 2001
From: zhuoyue03007 <zhuoyue03007@163.com>
Date: Mon, 18 Oct 2021 15:05:23 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=BB=E7=95=8C=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=98=BE=E7=A4=BA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=A4=84=E7=90=86=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

perf: 主界面布局滚动条采用el-scrollbar
---
 src/layout/components/appMain.vue | 60 ++++++++++++++++---------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 49c9d15dc..13da89387 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -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>