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,73 +9,32 @@ export default {
   ],
   render (h) {
     return <div class="d2-layout-header-aside-menu-side">
-      <el-menu
+      <d2-scrollbar>
-        collapse={ this.asideCollapse }
+        <el-menu
-        collapseTransition={ this.asideTransition }
+          collapse={ this.asideCollapse }
-        uniqueOpened={ true }
+          collapseTransition={ this.asideTransition }
-        defaultActive={ this.$route.fullPath }
+          uniqueOpened={ true }
-        ref="menu"
+          defaultActive={ this.$route.fullPath }
-        onSelect={ this.handleMenuSelect }>
+          ref="menu"
-        { this.aside.map(menu => createMenu.call(this, h, menu)) }
+          onSelect={ this.handleMenuSelect }>
-      </el-menu>
+          { 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">
+          this.aside.length === 0 && !this.asideCollapse
-            <d2-icon name="inbox"/>
+            ? <div class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
-            <span>没有侧栏菜单</span>
+              <d2-icon name="inbox"/>
-          </div>
+              <span>没有侧栏菜单</span>
-          : null
+            </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
-      }
-    }
   }
 }