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>