2023年6月20日发(作者：)

vue3scroll插件滚动条样式优化安装已封装好的npm install vuescrollnext --/rt scroll from 'vuescrollnext'(scroll)使⽤ 或者⾃⼰封装 如下步骤....1.安装npm install perfect-scrollbar --save2.使⽤ // setup

const testEvent = ()=>{}return {testEvent}不需要参数的情况,⾛默认配置或者

⼜或者
3. css 样式⽂件根据⾃⼰情况 从node_module 拷贝出来修改覆盖 或者使⽤他原来默认的4. 插件内容import { toCamelCaseSheet, toCamelCaseStyle } from "@/utils";import { App, Directive } from "@vue/runtime-core"import PerfectScrollbar from 'perfect-scrollbar';import '../assets/css/'/** * @interface container 容器id 可以是 '.logBody>.el-table__body-wrapper' * @interface suppressScrollX 默认false ,是否禁⽤X轴滚动条 * @interface suppressScrollY 默认false ,是否禁⽤Y轴滚动条 * @interface timeout cure dom async render 修复dom异步呈现 (⾃定义配置项) * @interface scrollXMarginOffset 在不启⽤X轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许⼀些“摆动空间”或“偏移中断”，这样X轴滚动条就不会因为⼏个像素⽽ * @interface handlers 默认 ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'], ⽤于滚动元素的处理程序列表 * @interface wheelSpeed 默认1 应⽤于⿏标滚轮事件的滚动速度 * @interface wheelPropagation 默认false 如果此选项为true，则当滚动到达边的末尾时，⿏标滚轮事件将传播到⽗元素 * @interface swipeEasing 默认false 如果此选项为真，则轻扫滚动 * @interface minScrollbarLength 默认 null 当设置为整数值时，滚动条的拇指部分不会缩⼩到该像素数以下 * @interface maxScrollbarLength 默认 null 当设置为整数值时，滚动条的拇指部分不会扩展到该像素数 * @interface useBothWheelAxes default false

*

* @interface scrollYMarginOffset 在不启⽤Y轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许⼀些“摆动空间”或“偏移中断”，这样X轴滚动条就不会因为⼏个像素⽽ * @interface scrollingThreshold 默认 1000 这将ps-scrolling-x和ps-scrolling-y类的阈值设置为保持不变。在默认的CSS中，⽆论悬停状态如何，它们都会显⽰滚动条。单位是毫 *

*/interface scrollBarOptions { container?: string suppressScrollX?: boolean suppressScrollY?: boolean scrollXMarginOffset?: number scrollYMarginOffset?: number handlers?: string[] timeout?: number wheelSpeed?: number, wheelPropagation?: boolean swipeEasing?: boolean minScrollbarLength?: number maxScrollbarLength?: number scrollingThreshold?: number useBothWheelAxes?: boolean testEvent?: Function}/** * 参数可以写成 驼峰格式 当前已经做好了 兼容 * @param el

* @event ps-scroll-y * This event fires when the y-axis is scrolled in either direction. * @event ps-scroll-x * This event fires when the x-axis is scrolled in either direction. * @event ps-scroll-up * This event fires when scrolling upwards. * @event ps-scroll-down * This event fires when scrolling downwards. * @event ps-scroll-left * This event fires when scrolling to the left. * @event ps-scroll-right * This event fires when scrolling to the right. * @event ps-y-reach-start * This event fires when scrolling reaches the start of the y-axis. * @event ps-y-reach-end * This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll). * @event ps-x-reach-start * This event fires when scrolling reaches the start of the x-axis. * @event ps-x-reach-end * This event fires when scrolling reaches the end of the x-axis. * You can also watch the reach state via the reach property. * 更多详情 [/mdbootstrap/perfect-scrollbar] *//** * @param el 容器 * @param options 配置项

*/const el_scrollBar = (el: any, options?: scrollBarOptions | any) => { if (el._ps_ instanceof PerfectScrollbar) { el._ps_.update(); } else { const ps = new PerfectScrollbar(el, options || {}); for (let handler in options) { if (typeof options[handler] === 'function') { ntListener(toCamelCaseStyle(handler), options[handler]) } } el._ps_ = ps }};/** * @param rules 容器 规则 */// ⾃定义指令const Direcive: Directive = { mounted: function (el, binding) { if (typeof == "object") { let dom () setTimeout(() => { dom = elector(ner) || el; if (!dom) { return (`未找到可供绑定的dom${}`); } const rules = ["fixed", "absolute", "relative"]; if (!es(putedStyle(dom, null).position)) { (`perfect-scrollbar所在的容器的position属性必须是以下之⼀：${("、")}`) } el_scrollBar(dom, ); }, t || 0) } else { let dom dom = elector() || el; el_scrollBar(dom); } }, beforeMount: function (el, binding) { }, updated: function (el, binding, vnode) { if (!el) { return (`未找到可供绑定的dom,${}`); } if (typeof == "object") { el = elector(ner) || el; el_scrollBar(el, ); } else { el = elector() || el; el_scrollBar(el) } }}// 名称⾃⼰定义export default { install(app: App) { ive('xxxx', Direcive) }}驼峰转换/** *

* @param str aBot => a-bot * @returns

*/export const toCamelCaseStyle = (str: string) => { return e(/([A-Z])/g, "-$1").toLowerCase();};/** *

* @param str x-yaa-zxx =>xYaaZxx * @returns

*/export const toCamelCaseSheet = (str: string) => { return e(/-(w)/g, (all, letter) => rCase());};

2023年6月20日发(作者：)

vue3scroll插件滚动条样式优化安装已封装好的npm install vuescrollnext --/rt scroll from 'vuescrollnext'(scroll)使⽤ 或者⾃⼰封装 如下步骤....1.安装npm install perfect-scrollbar --save2.使⽤ // setup

const testEvent = ()=>{}return {testEvent}不需要参数的情况,⾛默认配置或者

⼜或者
3. css 样式⽂件根据⾃⼰情况 从node_module 拷贝出来修改覆盖 或者使⽤他原来默认的4. 插件内容import { toCamelCaseSheet, toCamelCaseStyle } from "@/utils";import { App, Directive } from "@vue/runtime-core"import PerfectScrollbar from 'perfect-scrollbar';import '../assets/css/'/** * @interface container 容器id 可以是 '.logBody>.el-table__body-wrapper' * @interface suppressScrollX 默认false ,是否禁⽤X轴滚动条 * @interface suppressScrollY 默认false ,是否禁⽤Y轴滚动条 * @interface timeout cure dom async render 修复dom异步呈现 (⾃定义配置项) * @interface scrollXMarginOffset 在不启⽤X轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许⼀些“摆动空间”或“偏移中断”，这样X轴滚动条就不会因为⼏个像素⽽ * @interface handlers 默认 ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'], ⽤于滚动元素的处理程序列表 * @interface wheelSpeed 默认1 应⽤于⿏标滚轮事件的滚动速度 * @interface wheelPropagation 默认false 如果此选项为true，则当滚动到达边的末尾时，⿏标滚轮事件将传播到⽗元素 * @interface swipeEasing 默认false 如果此选项为真，则轻扫滚动 * @interface minScrollbarLength 默认 null 当设置为整数值时，滚动条的拇指部分不会缩⼩到该像素数以下 * @interface maxScrollbarLength 默认 null 当设置为整数值时，滚动条的拇指部分不会扩展到该像素数 * @interface useBothWheelAxes default false

*

* @interface scrollYMarginOffset 在不启⽤Y轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许⼀些“摆动空间”或“偏移中断”，这样X轴滚动条就不会因为⼏个像素⽽ * @interface scrollingThreshold 默认 1000 这将ps-scrolling-x和ps-scrolling-y类的阈值设置为保持不变。在默认的CSS中，⽆论悬停状态如何，它们都会显⽰滚动条。单位是毫 *

*/interface scrollBarOptions { container?: string suppressScrollX?: boolean suppressScrollY?: boolean scrollXMarginOffset?: number scrollYMarginOffset?: number handlers?: string[] timeout?: number wheelSpeed?: number, wheelPropagation?: boolean swipeEasing?: boolean minScrollbarLength?: number maxScrollbarLength?: number scrollingThreshold?: number useBothWheelAxes?: boolean testEvent?: Function}/** * 参数可以写成 驼峰格式 当前已经做好了 兼容 * @param el

* @event ps-scroll-y * This event fires when the y-axis is scrolled in either direction. * @event ps-scroll-x * This event fires when the x-axis is scrolled in either direction. * @event ps-scroll-up * This event fires when scrolling upwards. * @event ps-scroll-down * This event fires when scrolling downwards. * @event ps-scroll-left * This event fires when scrolling to the left. * @event ps-scroll-right * This event fires when scrolling to the right. * @event ps-y-reach-start * This event fires when scrolling reaches the start of the y-axis. * @event ps-y-reach-end * This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll). * @event ps-x-reach-start * This event fires when scrolling reaches the start of the x-axis. * @event ps-x-reach-end * This event fires when scrolling reaches the end of the x-axis. * You can also watch the reach state via the reach property. * 更多详情 [/mdbootstrap/perfect-scrollbar] *//** * @param el 容器 * @param options 配置项

*/const el_scrollBar = (el: any, options?: scrollBarOptions | any) => { if (el._ps_ instanceof PerfectScrollbar) { el._ps_.update(); } else { const ps = new PerfectScrollbar(el, options || {}); for (let handler in options) { if (typeof options[handler] === 'function') { ntListener(toCamelCaseStyle(handler), options[handler]) } } el._ps_ = ps }};/** * @param rules 容器 规则 */// ⾃定义指令const Direcive: Directive = { mounted: function (el, binding) { if (typeof == "object") { let dom () setTimeout(() => { dom = elector(ner) || el; if (!dom) { return (`未找到可供绑定的dom${}`); } const rules = ["fixed", "absolute", "relative"]; if (!es(putedStyle(dom, null).position)) { (`perfect-scrollbar所在的容器的position属性必须是以下之⼀：${("、")}`) } el_scrollBar(dom, ); }, t || 0) } else { let dom dom = elector() || el; el_scrollBar(dom); } }, beforeMount: function (el, binding) { }, updated: function (el, binding, vnode) { if (!el) { return (`未找到可供绑定的dom,${}`); } if (typeof == "object") { el = elector(ner) || el; el_scrollBar(el, ); } else { el = elector() || el; el_scrollBar(el) } }}// 名称⾃⼰定义export default { install(app: App) { ive('xxxx', Direcive) }}驼峰转换/** *

* @param str aBot => a-bot * @returns

*/export const toCamelCaseStyle = (str: string) => { return e(/([A-Z])/g, "-$1").toLowerCase();};/** *

* @param str x-yaa-zxx =>xYaaZxx * @returns

*/export const toCamelCaseSheet = (str: string) => { return e(/-(w)/g, (all, letter) => rCase());};