Vue 美化滚动条 perfect-scrollbar

1、下载 perfect-scrollbar

npm install perfect-scrollbar --save
npm install classlist-polyfill --save

2、新建scrollbar.js 封装perfect-scrollbar使用方法

import Vue from 'vue'
import 'classlist-polyfill'
import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'

const el_scrollBar = (el: any | HTMLElement) => {
    if (el._ps_ instanceof PerfectScrollbar) {
        el._ps_.update()
    } else {
        el._ps_ = new PerfectScrollbar(el, {suppressScrollX: true})
    }
};

Vue.directive('scrollBar', {
    inserted(el, binding, vnode) {
        const rules = ['fixed', 'absolute', 'relative'];
        let position = window.getComputedStyle(el).position;
        if (
            position != 'fixed' &&
            position != 'absolute' &&
            position != 'relative'
        ) {
            console.error(
                `scrollbar所在的容器的position属性必须是以下之一：${rules.join('、')}`
            )
        }
        el_scrollBar(el)
    },

    componentUpdated(el, binding, vnode: any, oldVnode) {
        let content: any = document.getElementById('app-content');
        content.scrollTop = 0;
        try {
            vnode.context.$nextTick(() => {
                el_scrollBar(el)
            })
        } catch (error) {
            console.error(error);
            el_scrollBar(el)
        }
    }
});

3、main.js全局引用

import './utils/scrollbar'

4. vue 使用

<template>
    <div class="container">
        <ul class="list" v-scrollBar>
           <li>巴拉巴拉</li>
           <li>炫光舞法</li>
           <!--想想这里有一堆li-->
           <li>天舞台</li>
        </ul>
    </div>
</template>