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

  最新封裝了一個vue防抖節流自定義指令,發佈到npm上,有用歡迎star,謝謝!vue

    npm地址:https://www.npmjs.com/package/v-debounce-throttlegit

    github地址:https://github.com/gerryli0214/vue-directivesgithub

  使用比較簡單,取消利用vue註冊事件,採用指令來註冊事件,防抖指令v-debounce,節流指令v-debounce,使用方式分爲兩種,傳入對象和採用修飾符,具體文檔以下:npm

默認參數:

參數名稱spa

數據類型對象

必填seo

默認值事件

備註ci

fun文檔

String

true

 

event

String

false

click

 

args

Any

false

 

wait

Number

false

200

 

備註:

一、  modifiers爲指令修飾符,默認與vue事件綁定保持一致,目前支持的事件類型:click,dblclick,keyup,keydown,keypress,mouseup,mousedown,mouseover,mouseleave,scroll,事件修飾符stop => 阻止默認事件,prev => 阻止事件冒泡

二、  自定義指令默認經過原生JS註冊元素事件,在按鈕元素上使用的時候,須要移出經過v-on(@)綁定的事件

三、防抖v-debounce,節流v-throttle

使用示例:

方法1:

        v-debounce=」funName」

方法2:

        v-debounce=」{fun: ‘xxx’, event: ‘xxx’}」

方法3:

        v-debounce.click.stop=’funName’

相關文章
相關標籤/搜索