码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-11-30 13:44:01      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:默认值   event   string   target   vue   ber   href   npm   github   

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

 

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

标签:默认值   event   string   target   vue   ber   href   npm   github   

原文地址:https://www.cnblogs.com/gerry2019/p/11962009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!