vue防抖节流之v-debounce--throttle使用指南

Posted 2020-11-23 gerry2019

　　最新封装了一个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’