登录叶细胞

src/layouts/admin/router-view/main.vue

@@ -1,10 +1,12 @@
 <template>
-    <el-main class="layout-main">
-        <el-scrollbar class="layout-main-scrollbar" :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
-            <router-view v-slot="{ Component }">
-                <transition :name="config.layout.mainAnimation" mode="out-in">
-                    <keep-alive :include="state.keepAliveComponentNameList">
-                        <component :is="Component" :key="state.componentKey" />
+    <el-main class='layout-main'>
+        <el-scrollbar class='layout-main-scrollbar' :style='layoutMainScrollbarStyle()' ref='mainScrollbarRef'>
+            <router-view v-slot='{ Component }'>
+                <transition :name='config.layout.mainAnimation' mode='out-in'>
+                    <keep-alive :include='state.keepAliveComponentNameList'>
+                        <div class='default-main'>
+                            <component :is='Component' :key='state.componentKey' />
+                        </div>
                     </keep-alive>
                 </transition>
             </router-view>
@@ -12,7 +14,7 @@
     </el-main>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
 import { useRoute, type RouteLocationNormalized } from 'vue-router'
 import { mainHeight as layoutMainScrollbarStyle } from '@/utils/layout'
@@ -22,7 +24,7 @@ import { useNavTabs } from '@/stores/navTabs'
 import type { ScrollbarInstance } from 'element-plus'
 
 defineOptions({
-    name: 'layout/main',
+    name: 'layout/main'
 })
 
 const { proxy } = useCurrentInstance()
@@ -37,10 +39,10 @@ const state: {
     keepAliveComponentNameList: string[]
 } = reactive({
     componentKey: route.path,
-    keepAliveComponentNameList: [],
+    keepAliveComponentNameList: []
 })
 
-const addKeepAliveComponentName = function (keepAliveName: string | undefined) {
+const addKeepAliveComponentName = function(keepAliveName: string | undefined) {
     if (keepAliveName) {
         let exist = state.keepAliveComponentNameList.find((name: string) => {
             return name === keepAliveName
@@ -89,13 +91,14 @@ watch(
 provide('mainScrollbarRef', mainScrollbarRef)
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .layout-container .layout-main {
     padding: 0 !important;
     overflow: hidden;
     width: 100%;
     height: 100%;
 }
+
 .layout-main-scrollbar {
     width: 100%;
     position: relative;