feat: 自定义侧边栏滚动条

Author: FairyEver

package.json

@@ -12,6 +12,8 @@
     "element-ui": "^2.13.1",
     "flex.css": "^1.1.7",
     "lodash": "^4.17.15",
+    "overlayscrollbars": "^1.12.0",
+    "overlayscrollbars-vue": "^0.2.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vue-router-layout": "^0.1.2",

src/components/index.js

@@ -1,5 +1,10 @@
 import Vue from 'vue'
 
+import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue'
+import 'overlayscrollbars/css/OverlayScrollbars.css'
+
+Vue.use(OverlayScrollbarsPlugin)
+
 const vueFiles = require.context('./', true, /com\.vue$/)
 vueFiles.keys().forEach(key => {
   const component = vueFiles(key).default

src/layouts/default.vue

@@ -6,6 +6,9 @@
     background-color: #051428;
     user-select: none;
     cursor: pointer;
+    .overlay {
+      height: 100%;
+    }
     .el-menu {
       border-right: none;
       .el-menu-item {
@@ -34,14 +37,24 @@ export default {
     const node =
       <div class="layout-main" flex="dir:left">
         <div class="layout-main--side" flex-box="0">
-          <el-menu
-            default-active={ this.$route.path }
-            background-color="#051428"
-            text-color="#969CA5"
-            active-text-color="#FFF"
-            router>
-            { this.menus.map(menu => createMenu(menu)) }
-          </el-menu>
+          <overlay-scrollbars
+            class="overlay os-theme-light"
+            options={
+              {
+                scrollbars: {
+                  autoHide: 'scroll'
+                }
+              }
+            }>
+            <el-menu
+              default-active={ this.$route.path }
+              background-color="#051428"
+              text-color="#969CA5"
+              active-text-color="#FFF"
+              router>
+              { this.menus.map(menu => createMenu(menu)) }
+            </el-menu>
+          </overlay-scrollbars>
         </div>
         <div flex-box="1">
           <router-view/>

src/pages/demo1/3.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 1-3"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo1/4.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 1-5"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo1/5.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 1-3"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo2.vue

@@ -0,0 +1,9 @@
+<route-meta>
+{
+  "title": "DEMO FOLDER 2"
+}
+</route-meta>
+
+<template>
+  <router-view/>
+</template>

src/pages/demo2/1.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 2-1"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo2/2.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 2-2"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo2/3.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 2-3"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>