美化元素滚动条:https://github.com/malihu/malihu-custom-scrollbar-plugin
vue项目:
安装依赖文件:
npm install imports-loader
npm install jquery-mousewheel
npm install malihu-custom-scrollbar-plugin
webpack.base.config.js 文件
module.exports = {
module: {
loaders: [
{ test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" },
{ test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" }
]
}
};
package.json文件添加:
"jquery": "^3.1.1",
"jquery-mousewheel": "^3.1.13",
"malihu-custom-scrollbar-plugin": "^3.1.5"
Scroll.vue文件:
<template> </template> <script> import Vue from 'vue' import $ from 'jquery' import 'jquery-mousewheel' import 'malihu-custom-scrollbar-plugin' import '../assets/css/jquery.mCustomScrollbar.css' Vue.directive('scroll', { bind(el) { Vue.nextTick(() => { $(el).mCustomScrollbar({ mouseWheel: true, theme: 'dark' }) }) }, update(el) { $(el).mCustomScrollbar('update') } })