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