277
vue防抖节流之v-debounce--throttle使用指南
source link: http://www.cnblogs.com/gerry2019/p/11962009.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最新封装了一个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’
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK