瀏覽代碼

滚动条

lilei 3 年之前
父節點
當前提交
bdf9b3c49d
共有 4 個文件被更改,包括 37 次插入9 次删除
  1. 5 0
      package-lock.json
  2. 1 0
      package.json
  3. 28 8
      src/components/Menu/SideMenu.vue
  4. 3 1
      src/main.js

+ 5 - 0
package-lock.json

@@ -17214,6 +17214,11 @@
         "vue": "^2.0"
       }
     },
+    "vuescroll": {
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.17.3.tgz",
+      "integrity": "sha512-5P3hje/fYjo1eAB0Y8zboLbaq/mnPNczYyZ1aPHHM6wIFKcqal9Mi42CBCZizUnEtoXtbsGlnyLcVbnalTNptA=="
+    },
     "vuex": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

+ 1 - 0
package.json

@@ -39,6 +39,7 @@
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",
     "vue2.0-zoom": "^2.1.1",
+    "vuescroll": "^4.17.3",
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1"
   },

+ 28 - 8
src/components/Menu/SideMenu.vue

@@ -5,14 +5,16 @@
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null">
-    <logo />
-    <s-menu
-      :collapsed="collapsed"
-      :menu="menus"
-      :theme="theme"
-      :mode="mode"
-      @select="onSelect"
-      style="padding: 10px 0px;"></s-menu>
+    <vue-scroll :ops="ops">
+      <logo />
+      <s-menu
+        :collapsed="collapsed"
+        :menu="menus"
+        :theme="theme"
+        :mode="mode"
+        @select="onSelect"
+        style="padding: 10px 0px;"></s-menu>
+    </vue-scroll>
   </a-layout-sider>
 
 </template>
@@ -52,6 +54,24 @@ export default {
       required: true
     }
   },
+  data () {
+    return {
+      ops: {
+        vuescroll: {},
+        scrollPanel: {},
+        rail: {
+          keepShow: true
+        },
+        bar: {
+          hoverStyle: true,
+          onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
+          background: '#F5F5F5', // 滚动条颜色
+          opacity: 0.5, // 滚动条透明度
+          'overflow-x': 'hidden'
+        }
+      }
+    }
+  },
   methods: {
     onSelect (obj) {
       this.$emit('menuSelect', obj)

+ 3 - 1
src/main.js

@@ -48,7 +48,9 @@ Vue.prototype.$hasPermissions = function (value) {
   }
   return isExist
 }
-
+// vuescroll
+import vuescroll from 'vuescroll'
+Vue.use(vuescroll)
 // 禁止输入框输入空格,换行符,<,>
 Vue.prototype.$filterEmpty = function (e) {
   return e.target.value.replace(/\s|\r\n|\n|<|>/g, '')