From a93e9664573c08aa87b299a1f492524dc2ba3e88 Mon Sep 17 00:00:00 2001
From: FairyEver <1711467488@qq.com>
Date: Tue, 24 Nov 2020 08:58:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=20layout=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=A4=84=E7=90=86=E8=BF=87=E7=9A=84=20element=20?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=BB=84=E4=BB=B6=E6=9B=BF=E4=BB=A3?=
 =?UTF-8?q?=20better-scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d2-scrollbar/index.vue         | 34 ++++++++
 src/components/index.js                       |  1 +
 .../components/menu-side/index.js             | 80 +++++--------------
 3 files changed, 54 insertions(+), 61 deletions(-)
 create mode 100644 src/components/d2-scrollbar/index.vue

diff --git a/src/components/d2-scrollbar/index.vue b/src/components/d2-scrollbar/index.vue
new file mode 100644
index 00000000..90baaa6a
--- /dev/null
+++ b/src/components/d2-scrollbar/index.vue
@@ -0,0 +1,34 @@
+<style lang="scss">
+.d2-scrollbar {
+  height: 100%;
+  .el-scrollbar__wrap {
+    overflow: auto;
+  }
+}
+</style>
+
+<template>
+  <el-scrollbar
+    class="d2-scrollbar"
+    ref="scrollbar"
+    v-bind="$attrs"
+    v-on="$listeners">
+    <slot/>
+  </el-scrollbar>
+</template>
+
+<script>
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
+
+export default {
+  name: 'd2-scrollbar',
+  inheritAttrs: false,
+  mounted () {
+    const scrollbar = this.$refs.scrollbar
+    addResizeListener(scrollbar.$el, scrollbar.update)
+    this.$once('hook:beforeDestroy', () => {
+      removeResizeListener(scrollbar.$el, scrollbar.update)
+    })
+  }
+}
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index c0845720..20e52be5 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -19,4 +19,5 @@ Vue.component('d2-mde', () => import('./d2-mde'))
 Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner'))
 Vue.component('d2-module-index-menu', () => import('./d2-module-index-menu'))
 Vue.component('d2-quill', () => import('./d2-quill'))
+Vue.component('d2-scrollbar', () => import('./d2-scrollbar'))
 Vue.component('d2-ueditor', () => import('./d2-ueditor'))
diff --git a/src/layout/header-aside/components/menu-side/index.js b/src/layout/header-aside/components/menu-side/index.js
index b876440a..fdc9b896 100644
--- a/src/layout/header-aside/components/menu-side/index.js
+++ b/src/layout/header-aside/components/menu-side/index.js
@@ -1,7 +1,6 @@
 import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
 import { createMenu } from '../libs/util.menu'
-import BScroll from 'better-scroll'
 
 export default {
   name: 'd2-layout-header-aside-menu-side',
@@ -10,73 +9,32 @@ export default {
   ],
   render (h) {
     return <div class="d2-layout-header-aside-menu-side">
-      <el-menu
-        collapse={ this.asideCollapse }
-        collapseTransition={ this.asideTransition }
-        uniqueOpened={ true }
-        defaultActive={ this.$route.fullPath }
-        ref="menu"
-        onSelect={ this.handleMenuSelect }>
-        { this.aside.map(menu => createMenu.call(this, h, menu)) }
-      </el-menu>
-      {
-        this.aside.length === 0 && !this.asideCollapse
-          ? <div class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
-            <d2-icon name="inbox"/>
-            <span>没有侧栏菜单</span>
-          </div>
-          : null
-      }
+      <d2-scrollbar>
+        <el-menu
+          collapse={ this.asideCollapse }
+          collapseTransition={ this.asideTransition }
+          uniqueOpened={ true }
+          defaultActive={ this.$route.fullPath }
+          ref="menu"
+          onSelect={ this.handleMenuSelect }>
+          { this.aside.map(menu => createMenu.call(this, h, menu)) }
+        </el-menu>
+        {
+          this.aside.length === 0 && !this.asideCollapse
+            ? <div class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
+              <d2-icon name="inbox"/>
+              <span>没有侧栏菜单</span>
+            </div>
+            : null
+        }
+      </d2-scrollbar>
     </div>
   },
-  data () {
-    return {
-      asideHeight: 300,
-      BS: null
-    }
-  },
   computed: {
     ...mapState('d2admin/menu', [
       'aside',
       'asideCollapse',
       'asideTransition'
     ])
-  },
-  watch: {
-    // 折叠和展开菜单的时候销毁 better scroll
-    asideCollapse (val) {
-      this.scrollDestroy()
-      setTimeout(() => {
-        this.scrollInit()
-      }, 500)
-    }
-  },
-  mounted () {
-    this.scrollInit()
-  },
-  beforeDestroy () {
-    this.scrollDestroy()
-  },
-  methods: {
-    scrollInit () {
-      this.BS = new BScroll(this.$el, {
-        mouseWheel: true,
-        click: true
-        // 如果你愿意可以打开显示滚动条
-        // scrollbar: {
-        //   fade: true,
-        //   interactive: false
-        // }
-      })
-    },
-    scrollDestroy () {
-      // https://github.com/d2-projects/d2-admin/issues/75
-      try {
-        this.BS.destroy()
-      } catch (e) {
-        delete this.BS
-        this.BS = null
-      }
-    }
   }
 }