Vue自定義指令中實現防抖和節流

2022-10-09 21:15:20 字數 523 閱讀 5989

首先兩者的區別

防抖的實現

這裡使用vue自定義指令的形式實現,核心**是事件繫結那段

/**

* @description vue自定義指令

* @param argment[0]

* @param argment[1] 在繫結元件中的各個生命週期中書寫業務,這裡使用inserted(){}

*/vue.directive('shake', 繫結元素的節點

* @param binding

* */

inserted(el, binding) , 400);

},false

);},

});

節流的實現
/**

*@description 節流 特定時間內一定會觸發一次

* */

vue.directive('throttling', , 2000);

});},

});

按鈕防抖和Vue中自定義指令防抖

防止按鈕抖動,思路 獲取到本次和上次點選的時間戳,相減小於1000毫秒則return,阻止繼續操作 if new date gettime this.newtimestamp 1000 塊 this.newtimestamp new date gettime vue中自定義指令防抖,建立乙個js檔案...

vue中自定義指令

鉤子函式 mounted 鉤子函式 會自動觸發的函式 生命週期 乙個例項從建立到銷毀的整個過程 vue中對元素進行識別 ref 相當於元素的id,可以使用ref為元素設定乙個唯一的標識 編號 type text v model newcar.id ref iidd this.ref s th is ...

vue中自定義指令

vue中的自定義指令分為全域性指令和私有指令 1.全域性指令 直接在vue身上繫結directive 其中directive有三個屬性 注意 自定義指令,在定義時不需要加v 字首,但是在繫結時,必須加上v 字首 doctype html en utf 8 viewport content width...