feat: 默认 layout 使用处理过的 element 滚动条组件替代 better-scroll

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>

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'))

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,6 +9,7 @@ export default {
   ],
   render (h) {
     return <div class="d2-layout-header-aside-menu-side">
+      <d2-scrollbar>
         <el-menu
           collapse={ this.asideCollapse }
           collapseTransition={ this.asideTransition }
@@ -27,56 +27,14 @@ export default {
             </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
-      }
-    }
   }
 }