天天看點

vue點選按鈕重複送出(思路:通過指令的方式解決)

1、src/directives/preventClick.js

import Vue from 'vue'

Vue.directive('preventClick', {
  inserted(el) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, 500)
      }
    })
  }
})      

2、main.js

import './directives/preventClick'      

3、使用:button按鈕可以使用,500ms,從一定程度上緩解重複請求的問題

<div id="app">
    <button v-preventClick @click="handlePuTong">普通按鈕</button>
    <el-button v-preventClick @click="handleElement">Element按鈕</el-button>
    <van-button v-preventClick @click="handleVant">vant按鈕</van-button>
  </div>      
vue