Vue.js - Vue下使用perfect-scrollbar（在特定框架里使用一款并非为该框架定制的库/插件）

//main.js//引入核心框架importVuefrom'vue';
//插件的包importPerfectScrollbarfrom'perfect-scrollbar';
//对应的cssimport"perfect-scrollbar/css/perfect-scrollbar.css";
/*** @description 自动判断该更新PerfectScrollbar还是创建它* @param {HTMLElement} el - 必填。dom元素*/constel_scrollBar= (el) => {
//在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_if (el._ps_instanceofPerfectScrollbar) {
el._ps_.update();
    } else {
//el上挂一份属性el._ps_=newPerfectScrollbar(el, { suppressScrollX: true });
    }
};
//接着，自定义Vue指令,指令名你自己随便编一个，我们假定它叫scrollBarVue.directive("scrollBar", {
//使用inserted钩子函数（初次创建dom）获取使用自定义指令处的dominserted(el, binding, vnode) {
//判断其样式是否存在position 并且position为"fixed", "absolute"或"relative"//如果不符合条件，抛个错误。当然你也可以抛个警告然顺便给其position自动加上"relative"//为什么要这么做呢，因为PerfectScrollbar实现原理就是对dom注入两个div，一个是x轴一个是y轴，他们两的position都是absolute。//对css稍有常识的人都知道，absolute是相对于所有父节点里设置了position属性的最近的一个节点来定位的，为了能够正确定位，我们要给其设置position属性construles= ["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.nextTickvnode.context.$nextTick(
                () => {
el_scrollBar(el);
                }
            )
        } catch (error) {
console.error(error);
el_scrollBar(el);
        }
    }
})

// 具体组件<template><divclass="container"><ulclass="list"v-scrollBar><li>巴拉巴拉</li><li>炫光舞法</li><!--想想这里有一堆li--><li>天舞台</li></ul></div></template><stylelang="less"scoped>.list{
position:relative;
/*不写高度说明高度自适应，既然高度都无限了根本就不会出现滚动条*/height:300px;
}
</style>

//main.js 头部引包部分改一下//引入核心框架importVuefrom'vue';
//classList的垫片import"classlist-polyfill";
//插件的包importPerfectScrollbarfrom'perfect-scrollbar';
//对应的cssimport"perfect-scrollbar/css/perfect-scrollbar.css";

importVuefrom'vue';
//自定义滚动条importPerfectScrollbarfrom'perfect-scrollbar';
//对应的cssimport"perfect-scrollbar/css/perfect-scrollbar.css";
/*** @description 为自定义滚动条全局注入自定义指令。自动判断该更新PerfectScrollbar还是创建它* @param {Element} el - 必填。dom元素*/constel_scrollBar= (el) => {
//在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_if (el._ps_instanceofPerfectScrollbar) {
el._ps_.update();
    } else {
//el上挂一份属性el._ps_=newPerfectScrollbar(el, { suppressScrollX: true });
    }
};
Vue.directive("anyNameYouLike",{
inserted(el, binding){
const { arg } =binding;
if(arg==="任何你喜欢的标记"){
el=el.querySelector(".el-table__body-wrapper");
if(!el){
returnconsole.warn("未发现className为el-table__body-wrapper的dom");
            }
        }
construles= ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error(`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join("、")}`)
            }
el_scrollBar(el);
    },
componentUpdated(el, binding, vnode) {
const { arg } =binding;
if (arg==="任何你喜欢的标记") {
el=el.querySelector(".el-table__body-wrapper");
if(!el){
returnconsole.warn("未发现className为el-table__body-wrapper的dom");
            }
        }
vnode.context.$nextTick(
            () => {
try {
el_scrollBar(el);
                } catch (error) {
console.error(error);
                }
            }
        )
    },
})