说明 ~~~ 用法就是在想要滚动的容器增加一个v-scrollbar指令就行，容器需要具备的条件：position属性必须是relative、fixed或者absolute，height属性需要确定值。 然后，如果是el-table组件需要滚动里面的项目内容，指令可以写成v-scrollbar:el-table，同样el-table也需要满足上面两个条件 npm install --save ~~~ 项目结构  ### 1.1.1 使用方式 // package.json ~~~ "perfect-scrollbar": "^1.4.0", ~~~ //src/directives/index.js ~~~ import Vue from 'vue' // 检索目录下的模块 const req = require.context('.', true, /\.js$/) req.keys().forEach(fileName => { // require模块 if (!fileName.includes('index')) { const componentConfig = req(fileName) const name = fileName .replace('./v-', '') .replace(/\.js$/, '') .toLowerCase() Vue.directive(name, componentConfig.default || componentConfig) } }) ~~~ // src/directives/v-scrollbar.js ~~~ /* * @Description: 自定义滚动条指令 * @LastEditTime: 2019-08-21 11:17:19 */ // 自定义滚动条 import PerfectScrollbar from 'perfect-scrollbar' import 'perfect-scrollbar/css/perfect-scrollbar.css' /** * @description 自动判断该更新PerfectScrollbar还是创建它 * @param {HTMLElement} el dom元素 */ const elScrollBar = el => { if (el.dmePs instanceof PerfectScrollbar) { el.dmePs.update() } else { // 初始化自定义滚动条 el.dmePs = new PerfectScrollbar(el, { suppressScrollX: true }) } } export default { inserted(el, binding) { let target = el const { arg } = binding if (arg === 'el-table') { target = el.querySelector('.el-table__body-wrapper') } const rules = ['fixed', 'absolute', 'relative'] if (!rules.includes(window.getComputedStyle(el, null).position)) { console.error(`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join('、')}`) } elScrollBar(target) }, componentUpdated(el, binding, vnode) { let target = el const { arg } = binding if (arg === 'el-table') { target = el.querySelector('.el-table__body-wrapper') } vnode.context.$nextTick(() => { try { elScrollBar(target) } catch (error) { console.error(error) } }) } } ~~~ // src/register/index.js ~~~ // 统一注册全局配置和组件 /* * @Description: 注册器 * @LastEditTime: 2019-08-20 17:23:32 */ // 统一注册全局配置、组件以及指令 import Vue from 'vue' // 注册全局组件 import '@/components' // 注册全局指令 import '@/directives' // 注册饿了么ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ~~~