說明 ~~~ 用法就是在想要滾動的容器增加一個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' ~~~