路由页面改用原生滚动条

vue/src/component/AbstractForm/FormAnchor.vue

@@ -26,7 +26,7 @@ export default {
         bounds: {type: Number, default: 0},
         getContainer: {
             type: Function,
-            default: () => document.querySelector('#app .app-main>.el-scrollbar>.el-scrollbar__wrap')
+            default: () => document.querySelector('#app .app-main>.scroll-container')
         },
     },
 

vue/src/layout/component/Footer.vue

@@ -1,4 +1,4 @@
-<template>
+<template functional>
     <footer class="page-footer">
         <div class="copyright">
             Copyright © 2020 - <a href="https://github.com/toesbieya" target="_blank">toesbieya</a>

vue/src/layout/component/Main.vue

@@ -1,6 +1,6 @@
 <template>
     <main class="app-main">
-        <el-scrollbar ref="scrollbar" v-show="!showIframe" class="scroll-container">
+        <div v-show="!showIframe" class="scroll-container">
             <div class="page-view">
                 <keep-router-view-alive :include="cachedViews">
                     <transition :name="transitionName" mode="out-in">
@@ -8,7 +8,8 @@
                     </transition>
                 </keep-router-view-alive>
             </div>
-        </el-scrollbar>
+            <v-footer/>
+        </div>
 
         <!--跨域iframe无法调整高度，只能使用原生滚动条-->
         <iframe
@@ -24,7 +25,7 @@
 
         <el-backtop
             v-if="showBackToTop"
-            target=".app-main .el-scrollbar__wrap"
+            target=".app-main .scroll-container"
             :visibility-height="400"
             :bottom="66"
         >
@@ -36,19 +37,16 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import {mapState} from 'vuex'
 import KeepRouterViewAlive from "./KeepAlive"
-import Footer from "./Footer"
+import VFooter from "./Footer"
 
 export default {
     name: 'AppMain',
 
-    components: {KeepRouterViewAlive},
+    components: {KeepRouterViewAlive, VFooter},
 
     computed: {
-        ...mapState('app', ['scrollTop']),
-
         ...mapState('setting', ['showBackToTop']),
 
         ...mapState('tagsView', ['cachedViews', 'transitionName']),
@@ -58,19 +56,6 @@ export default {
             currentIframe: state => state.current,
             iframeList: state => state.list
         })
-    },
-
-    watch: {
-        scrollTop(v) {
-            if (v >= 0) this.$refs.scrollbar.$refs.wrap.scrollTop = v
-        }
-    },
-
-    mounted() {
-        //插入footer
-        const FooterConstructor = Vue.extend(Footer)
-        const footerInstance = new FooterConstructor().$mount()
-        this.$refs.scrollbar.$refs.wrap.appendChild(footerInstance.$el)
     }
 }
 </script>
@@ -80,30 +65,21 @@ export default {
 
 .app-main {
     position: relative;
+    flex: 1;
     overflow: hidden;
     background-color: #f5f7f9;
-    flex: 1;
 
     .scroll-container {
         position: relative;
         height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: overlay;
+        overflow-x: inherit;
 
         .page-view {
             margin: $page-view-margin;
-        }
-
-        > .el-scrollbar__bar.is-horizontal {
-            display: none !important;
-        }
-
-        > .el-scrollbar__wrap {
-            display: flex;
-            flex-direction: column;
-            overflow-x: hidden;
-
-            .el-scrollbar__view {
-                flex: 1;
-            }
+            flex: 1;
         }
     }
 

vue/src/store/module/app.js

@@ -11,9 +11,6 @@ const state = {
     //登陆页背景动画
     loginBackgroundAnimation: 'sparkRain',
 
-    //路由页面滚动高度
-    scrollTop: 0,
-
     //右侧块是否含有头部
     hasHeader: !!!localSettings.headerAutoHidden
 }