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,
        });
    },



`});`