PerfectScrollbar {#menu_index_1}

import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';
/**


@description 初始化 PerfectScrollbar


@param {HTMLElement} el DOM 元素


@param {object} [options] 配置选项


@param {boolean} [options.x] 是否启用水平滚动条，默认为 false


@param {boolean} [options.y] 是否启用垂直滚动条，默认为 false
*/
const fnInitScrollbar = (el, options = {}) => {
if (!el) {
return;
}
/** 自定义属性名称，保存实例 */
const attrName = 'ps';
/** @type {PerfectScrollbar} */
const instance = el[attrName];
if (instance instanceof PerfectScrollbar) {
// 已存在，更新
instance.update();
} else {
// 不存在，创建
el[attrName] = new PerfectScrollbar(el, {
suppressScrollX: !options.x,
suppressScrollY: !options.y,
swipeEasing: true,
});
}
};


// 注册自定义指令 v-scrollbar
Vue.directive('scrollbar', {
// 被绑定元素插入父节点时
inserted: function (el, binding) {
const rules = ['fixed', 'absolute', 'relative', 'sticky'];
const { modifiers } = binding;
    // 判断元素是否已设置定位
    //   滚动条需要相对于父元素进行绝对定位
    if (rules.includes(getComputedStyle(el).position)) {
        fnInitScrollbar(el, {
            x: modifiers.x,
            y: modifiers.y,
        });
    } else {
        console.error('PerfectScrollbar 所在的元素未设置有效的定位');
        console.error('元素', el);
    }
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后
componentUpdated: function (el, binding, vnode) {
    // vnode.context 为 Vue 实例
    //   也可以写成为 Vue.$nextTick()
    vnode.context.$nextTick(() => {
        fnInitScrollbar(el);
    });
},

});

SimpleBar {#menu_index_2}

/**
 * @description 初始化 SimpleBar
 * @param {HTMLElement} el DOM 元素
 * @param {object} [options] 配置选项
 * @param {object} [options.keep] 保持显示，不自动隐藏
 */
const fnInitScrollbar = (el, options = {}) => {
    if (!el) {
        return;
    }
/** 自定义属性名称，保存实例 */
const attrName = '__scrollbar__';
/** @type {SimpleBar} */
const instance = el[attrName];
// 移除已存在
if (instance instanceof SimpleBar) {
instance.unMount();
}
// 初始化
el[attrName] = new SimpleBar(el, {
autoHide: !options.keep,
timeout: 2000,
});

};
// 注册自定义指令 v-scrollbar
Vue.directive('scrollbar', {
// 元素插入父节点时
inserted: function (el, binding) {
const { modifiers } = binding;
    fnInitScrollbar(el, {
        keep: modifiers.keep,
    });
},

});