最新封装了一个 vue 防抖节流自定义指令, 发布到 NPM 上, 有用欢迎 star, 谢谢!
NPM 地址: https://www.npmjs.com/package/v-debounce-throttle
GitHub 地址: https://github.com/gerryli0214/vue-directives
使用比较简单, 取消利用 vue 注册事件, 采用指令来注册事件, 防抖指令 v-debounce, 节流指令 v-debounce, 使用方式分为两种, 传入对象和采用修饰符, 具体文档如下:
默认参数:
参数名称 | 数据类型 | 必填 | 默认值 | 备注 |
fun | String | true | 空 |
|
event | String | false | click |
|
args | Any | false | 空 |
|
wait | Number | false | 200 |
|
备注:
1,modifiers 为指令修饰符, 默认与 vue 事件绑定保持一致, 目前支持的事件类型: click,dblclick,keyup,keydown,keypress,mouseup,mousedown,mouseover,mouseleave,scroll, 事件修饰符 stop => 阻止默认事件, prev => 阻止事件冒泡
2, 自定义指令默认通过原生 JS 注册元素事件, 在按钮元素上使用的时候, 需要移出通过 v-on(@) 绑定的事件
3, 防抖 v-debounce, 节流 v-throttle
使用示例:
方法 1:
v-debounce="funName"
方法 2:
v-debounce="{fun:'xxx', event:'xxx'}"
方法 3:
v-debounce.click.stop='funName'
来源: https://www.cnblogs.com/gerry2019/p/11962009.html