v-debounce 防抖節流
阿新 • • 發佈：2021-07-01
1 簡介 2 v-debounce-throttle是一個vue防抖節流指令，控制單一事件的觸發頻率。其核心是攔截元件元素的v-on繫結事件，採用原生的事件註冊機制。具體程式碼如下： 6 起步 7 安裝 8 npm install v-debounce-throttle -S 9 引入 10 import vDebounceThrottle from 'v-debounce-throttle' 11 Vue.use(vDebounceThrottle) 12 示例 13 防抖 14 <button v-debounce="handleClick"></button>15 節流 16 <button v-throttle="handleClick"></button> 17 使用案例 18 使用方法1 19 <button v-debounce="handleClick">方法1</button> 20 使用方法2 21 <button v-debounce="{fun: 'handleClick', event: 'click', args: 'test'}"></button> 22 使用方法3 23 <button v-debounce.dblclick.stop="handleDblclick"></button> 24 API文件 25 引數 26
27 預設延遲後觸發，如若調整順序，可以設定before、all修飾符 28 29 修飾符(modifier) 30 事件 31 click 32 dblclick 33 keyup 34 keydown 35 keypress 36 mousedown 37 mouseover 38 mouseleave 39 scroll 40 事件修飾符 41 stop(取消冒泡) 42 prev(阻止預設事件) 43 before(防抖延遲前觸發) 44 all(防抖延遲前後都觸發)
如自己封裝參考部落格https://blog.csdn.net/userkang/article/details/101448707