【新增】自定义指令：v-scrollbar

src/main.js

@@ -3,6 +3,7 @@ import store from '@/stores';
 import router from '@/router';
 import TDesignVue from '@/plugins/TDesign-vue'; // TDesign按需引入
 import '@/plugins/components';
+import '@/plugins/directives';
 import '@/styles/common.less'; // 自定义全局样式表
 
 app.use(store);

src/plugins/directives.js

@@ -0,0 +1,22 @@
+import app from '@/app';
+import { OverlayScrollbars } from 'overlayscrollbars';
+
+// 滚动条
+app.directive('scrollbar', (el, binding) => {
+    const { arg: enable } = binding;
+    if (!enable) return;
+    const { padding } = binding.modifiers;
+    console.log(padding);
+    OverlayScrollbars(el, {
+        paddingAbsolute: !!padding,
+        overflow: {
+            x: 'hidden',
+            y: 'scroll',
+        },
+        scrollbars: {
+            theme: 'os-theme-light',
+            autoHide: 'leave',
+            autoHideDelay: 300,
+        },
+    });
+});