npm install perfect-scrollbar --save

//main.js
//引入核心框架
import Vue from 'vue';
//插件的包
import PerfectScrollbar from 'perfect-scrollbar';
//對應(yīng)的css
import "perfect-scrollbar/css/perfect-scrollbar.css";
/**
 * @description 自動判斷該更新PerfectScrollbar還是創(chuàng)建它
 * @param {HTMLElement} el - 必填。dom元素
 */
const el_scrollBar = (el) => {
    //在元素上加點(diǎn)私貨，名字隨便取，確保不會和已有屬性重復(fù)即可，我取名叫做_ps_
    if (el._ps_ instanceof PerfectScrollbar) {
        el._ps_.update();
    } else {
        //el上掛一份屬性
        el._ps_ = new PerfectScrollbar(el, {
            // 要配什么屬性自己看官網(wǎng)，此處不會解釋任何其配置項的含義
            suppressScrollX: true,
        });
    }
};
//接著，自定義Vue指令,指令名你自己隨便編一個，我們假定它叫scrollBar
Vue.directive("scrollBar", {
    //使用inserted鉤子函數(shù)（初次創(chuàng)建dom）獲取使用自定義指令處的dom
    inserted(el, binding, vnode) {
        //判斷其樣式是否存在position 并且position為"fixed", "absolute"或"relative"
        //如果不符合條件，拋個錯誤。當(dāng)然你也可以拋個警告然順便給其position自動加上"relative"
        //為什么要這么做呢，因為PerfectScrollbar實現(xiàn)原理就是對dom注入兩個div，一個是x軸一個是y軸，他們兩的position都是absolute。
        //對css稍有常識的人都知道，absolute是相對于所有父節(jié)點(diǎn)里設(shè)置了position屬性的最近的一個節(jié)點(diǎn)來定位的，為了能夠正確定位，我們要給其設(shè)置position屬性
        const rules = ["fixed", "absolute", "relative", "sticky"];
        if (!rules.includes(window.getComputedStyle(el, null).position)) {
            console.error(`perfect-scrollbar所在的容器的position屬性必須是以下之一：${rules.join("、")}`)
        }
        //el上掛一份屬性
        el_scrollBar(el);
    },
    //更新dom的時候
    componentUpdated(el, binding, vnode, oldVnode) {
        //vnode.context其實就是vue實例，這里其實無需實例也直接用Vue的靜態(tài)方法
        //故而也可以寫成Vue.nextTick
        vnode.context.$nextTick(
            () => {
                el_scrollBar(el);
            }
        )
    }
})

//具體組件
<template>
    <div class="container">
        <ul class="list" v-scrollBar>
           <li>巴拉巴拉</li>
           <li>炫光舞法</li>
           <!--想象這里有一堆li-->
           <li>天舞臺</li>
        </ul>
    </div>
</template>
<style lang="less" scoped>
.list{
    position:relative;
    /*不寫高度說明高度自適應(yīng)，既然高度都無限了根本就不會出現(xiàn)滾動條*/
    height:300px;
}
</style>

npm install classlist-polyfill --save

//main.js 頭部引包部分改一下
//引入核心框架
import Vue from 'vue';
//classList的墊片
import "classlist-polyfill";
//插件的包
import PerfectScrollbar from 'perfect-scrollbar';
//對應(yīng)的css
import "perfect-scrollbar/css/perfect-scrollbar.css";