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


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM