關于vue表單提交防雙/多擊的例子
更新時間：2019年10月31日 08:38:42 作者：風翻火焰
今天小編就為大家分享一篇關于vue表單提交防雙/多擊的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
先說下出現(xiàn)場景：
測試這次比較極端(也有可能是測試又學會什么新知識了，哈哈)，說是在點擊提交和調(diào)用之間有可能有狂暴的用戶在多連擊，就像打游戲一樣，調(diào)用接口后的loading狀態(tài)切換就無效了
然后，就只好自己寫了個基于vue防多擊的指令,小小偷懶了下，我里面已經(jīng)注入fastClick了，因此響應方法是極快的，因此只需要稍微控制下二次點擊的時間即可
export default {}.install = (Vue, options = {}) => {
Vue.directive('dbClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
if(!el.disabled) {
el.disabled = true;
let timer = setTimeout( () => {
el.disabled = false;
},1000)
}
})
}
})
}
用法：
<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">保存</mt-button></pr-col>
以上這篇關于vue表單提交防雙/多擊的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-11-11
vue 實現(xiàn)數(shù)字滾動增加效果的實例代碼
最近做了個項目需要做數(shù)字滾動增加的效果，剛開始接到這個項目還真是懵了，后來發(fā)現(xiàn)實現(xiàn)代碼很簡單的，下面小編給大家?guī)砹藇ue 實現(xiàn)數(shù)字滾動增加效果的實例代碼，需要的朋友參考下吧2018-07-07
Vue + element 實現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實現(xiàn)多選框組并保存已選id集合,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue項目打包發(fā)布后接口報405錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在使用vue開發(fā)大屏時,發(fā)現(xiàn)了一個很好用的可視化組件庫DataV,下面這篇文章主要給大家介紹了關于VUE引入DataV報錯解決的實戰(zhàn)記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要為大家詳細介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Vue Cli與BootStrap結合實現(xiàn)表格分頁功能
這篇文章主要介紹了Vue Cli與BootStrap結合實現(xiàn)表格分頁功能,需要的朋友可以參考下2017-08-08
vue實現(xiàn)動態(tài)給data函數(shù)中的屬性賦值
這篇文章主要介紹了vue實現(xiàn)動態(tài)給data函數(shù)中的屬性賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue+Element自定義縱向表格表頭教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10