vue下使用perfect-scrollbar（在特定框架裏使用一款並不是爲該框架定製的庫/插件）

其實，如何在特定框架裏使用一款並不是爲該框架定製的庫/插件，只有兩點：
1.熟悉這個框架
2.熟悉這個庫/插件的工做原理

說完廢話。進入正題。
perfect-scrollbar是一款輕量級的滾動插件，具體介紹詳見其官網
你只須要知道它絕對不是爲了vue設計的，和vue沒半毛錢關係。那麼如何完美的融合其中呢？

如下是個人步驟
首先，安裝包

npm install perfect-scrollbar --save

其次，引入包。爲了可以在項目中信手拈來的使用而不是每一個要用的組件都去引入一遍，咱們應該在主入口引入並註冊爲自定義指令。

//main.js

//引入核心框架
import Vue from 'vue';
//插件的包
import PerfectScrollbar from 'perfect-scrollbar';
//對應的css
import "perfect-scrollbar/css/perfect-scrollbar.css";

/**
 * @description 自動判斷該更新PerfectScrollbar仍是建立它
 * @param {HTMLElement} el - 必填。dom元素
 */
const el_scrollBar = (el) => {
    //在元素上加點私貨，名字隨便取，確保不會和已有屬性重複便可，我取名叫作_ps_
    if (el._ps_ instanceof PerfectScrollbar) {
        el._ps_.update();
    } else {
        //el上掛一份屬性
        el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });
    }
};

//接着，自定義Vue指令,指令名你本身隨便編一個，咱們假定它叫scrollBar
Vue.directive("scrollBar", {
    //使用inserted鉤子函數（初次建立dom）獲取使用自定義指令處的dom
    inserted(el, binding, vnode) {
        //判斷其樣式是否存在position 而且position爲"fixed", "absolute"或"relative"
        //若是不符合條件，拋個錯誤。固然你也能夠拋個警告然順便給其position自動加上"relative"
        //爲何要這麼作呢，由於PerfectScrollbar實現原理就是對dom注入兩個div，一個是x軸一個是y軸，他們兩的position都是absolute。
        //對css稍有常識的人都知道，absolute是相對於全部父節點裏設置了position屬性的最近的一個節點來定位的，爲了可以正肯定位，咱們要給其設置position屬性
        const rules = ["fixed", "absolute", "relative"];
        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) {
        try {
            //vnode.context其實就是vue實例，這裏其實無需實例也直接用Vue的靜態方法
            //故而也能夠寫成Vue.nextTick
            vnode.context.$nextTick(
                () => {
                    el_scrollBar(el);
                }
            )
        } catch (error) {
            console.error(error);
            el_scrollBar(el);
        }
    }
})

至此，咱們完成了PerfectScrollbar在vue的準備工做
接下來咱們試試如何調用。
用法至關簡單，在要用到的地方直接寫一個v-scrollBar

//具體組件

<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;
    /*不寫高度說明高度自適應，既然高度都無限了根本就不會出現滾動條*/
    height:300px;
}
</style>

是否是很簡單，只要在要用到滾動條的那個ul上面加一個v-scrollBar便可，其他什麼都不用操心。

最後，還要注意一下兼容性
據perfect-scrollbar官網描述。它對ie的支持僅完美支持ie11，而後ie10勉強能用
那麼vue是支持到ie9的。咱們至少要讓他在ie9上能用

那麼如今的這個狀態直接在ie9上試試。應該會獲得一個相似於
Uncaught TypeError: Cannot read property 'add' of undefined
的報錯。

那麼咱們打開perfect-scrollbar的源碼看看

有.add的地方就這兩處 都是classList的方法
那麼classList是什麼，參見mdn
ie9上沒有對其實現，因此咱們掛一個對其的墊片
再來安裝一個包

npm install classlist-polyfill --save

而後在引入perfect-scrollbar包以前（其實在它被實例化以前就行）引入它

//main.js 頭部引包部分改一下

//引入核心框架
import Vue from 'vue';
//classList的墊片
import "classlist-polyfill";
//插件的包
import PerfectScrollbar from 'perfect-scrollbar';
//對應的css
import "perfect-scrollbar/css/perfect-scrollbar.css";

至此大功告成