v-debounce-throttle是一个vue防抖节流指令
v-debounce-throttle是一个vue防抖节流指令
简介
v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率。其核心是拦截组件元素的v-on绑定事件,采用原生的事件注册机制。具体代码如下: 6 起步
安装
npm install v-debounce-throttle -S
引入
import vDebounceThrottle from 'v-debounce-throttle' Vue.use(vDebounceThrottle)
防抖
<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文档 参数
默认延迟后触发,如若调整顺序,可以设置before、all修饰符 修饰符(modifier) 事件
click
dblclick
keyup
keydown
keypress
mousedown
mouseover
mouseleave
scroll 事件修饰符
stop(取消冒泡)
prev(阻止默认事件)
before(防抖延迟前触发)
all(防抖延迟前后都触发)