docs: 添加文章内容（2013 ~ 2023）

docs/content/vue-scrollbar-plugin.md

@@ -0,0 +1,122 @@
+---
+title: 「Web 前端」Vue 使用滚动条插件
+date: 2025-03-15T23:15:09Z
+lastmod: 2025-03-15T23:15:38Z
+tags: [Web 前端,JavaScript,Vue.js,代码片段]
+---
+
+# 「Web 前端」Vue 使用滚动条插件
+
+#### PerfectScrollbar
+
+```javascript
+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
+
+```javascript
+/**
+ * @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,
+        });
+    },
+});
+```
+
+‍