npm install perfect-scrollbar --save

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

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

npm install classlist-polyfill --save

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