最新封裝了一個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’