简介

v-debounce-throttle是一个vue防抖节流指令，控制单一事件的触发频率。其核心是拦截组件元素的v-on绑定事件，采用原生的事件注册机制。具体代码如下：

• gitHub
• npm

起步

1. 安装

npm install v-debounce-throttle -S

2. 引入

import vDebounceThrottle from 'v-debounce-throttle'
Vue.use(vDebounceThrottle)

3. 示例

• 防抖

<button v-debounce="handleClick"></button>

• 节流

<button v-throttle="handleClick"></button>

使用案例

• 使用方法1

<button v-debounce="handleClick">方法1</button>

• 使用方法2

<button v-debounce="{fun: 'handleClick', event: 'click', args: 'test'}"></button>

• 使用方法3

<button v-debounce.dblclick.stop="handleDblclick"></button>

API文档

参数

| 参数名称 | 数据类型 | 必填 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | event | String | false | click | 事件名称 | | args | Any | false | null | 附加参数 | | wait | Number | false | 200 | 等待时间 |

默认延迟后触发，如若调整顺序，可以设置before、all修饰符

修饰符(modifier)

• 事件
  • click
  • dblclick
  • keyup
  • keydown
  • keypress
  • mousedown
  • mouseover
  • mouseleave
  • scroll
• 事件修饰符
  • stop(取消冒泡)
  • prev(阻止默认事件)
  • before(防抖延迟前触发)
  • all(防抖延迟前后都触发)