vue防止暴力点击

vue防止暴力点击

问题：快速点击按钮时会频繁重复调用借口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。
1.创建preventReClick.js文件

import Vue from 'vue'
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
})

2.在main.js中全局引用

import './utils/preventReClick.js'

3.在button组件中直接使用 v-preventReClick 指令

el-button type="primary" v-preventReClick @click="submitelsetricitySeller">提 交</el-button>