From dd6f87ed045c14b05b96cf671a7ecfc63fc76c07 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Mon, 24 Aug 2020 12:25:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=A1=B5=E9=9D=A2=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=E5=8E=9F=E7=94=9F=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/component/AbstractForm/FormAnchor.vue |  2 +-
 vue/src/layout/component/Footer.vue           |  2 +-
 vue/src/layout/component/Main.vue             | 48 +++++--------------
 vue/src/store/module/app.js                   |  3 --
 4 files changed, 14 insertions(+), 41 deletions(-)

diff --git a/vue/src/component/AbstractForm/FormAnchor.vue b/vue/src/component/AbstractForm/FormAnchor.vue
index a09edd5..21ec1d6 100644
--- a/vue/src/component/AbstractForm/FormAnchor.vue
+++ b/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')
         },
     },
 
diff --git a/vue/src/layout/component/Footer.vue b/vue/src/layout/component/Footer.vue
index 6ee2ef4..ebb74ba 100644
--- a/vue/src/layout/component/Footer.vue
+++ b/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>
diff --git a/vue/src/layout/component/Main.vue b/vue/src/layout/component/Main.vue
index 9710b0e..5e3f9ad 100644
--- a/vue/src/layout/component/Main.vue
+++ b/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;
         }
     }
 
diff --git a/vue/src/store/module/app.js b/vue/src/store/module/app.js
index 15066c0..767b337 100644
--- a/vue/src/store/module/app.js
+++ b/vue/src/store/module/app.js
@@ -11,9 +11,6 @@ const state = {
     //登陆页背景动画
     loginBackgroundAnimation: 'sparkRain',
 
-    //路由页面滚动高度
-    scrollTop: 0,
-
     //右侧块是否含有头部
     hasHeader: !!!localSettings.headerAutoHidden
 }