這篇文章主要介紹vue表單提交防雙/多擊的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

"熱情、務(wù)實(shí)、專業(yè)、創(chuàng)新”我們不忘初心，砥礪前行，實(shí)在做人，認(rèn)真做事，始終如一的專注企業(yè)互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷推廣服務(wù)。品牌網(wǎng)站制作本著讓客戶滿意的目標(biāo)，幫助企業(yè)通過互聯(lián)網(wǎng)創(chuàng)造價(jià)值.成都創(chuàng)新互聯(lián)公司全體員工將通過不懈努力，力爭(zhēng)成為客戶在信息化領(lǐng)域中值得長(zhǎng)期信賴的合作伙伴。

先說下出現(xiàn)場(chǎng)景：

測(cè)試這次比較極端(也有可能是測(cè)試又學(xué)會(huì)什么新知識(shí)了，哈哈)，說是在點(diǎn)擊提交和調(diào)用之間有可能有狂暴的用戶在多連擊，就像打游戲一樣，調(diào)用接口后的loading狀態(tài)切換就無效了

然后，就只好自己寫了個(gè)基于vue防多擊的指令,小小偷懶了下，我里面已經(jīng)注入fastClick了，因此響應(yīng)方法是極快的，因此只需要稍微控制下二次點(diǎn)擊的時(shí)間即可

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)
  }
  })
 }
 })
}

用法：

保存

以上是“vue表單提交防雙/多擊的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！