vue防止按钮重复提交

在项目的一些新增页面，点击提交时，由于后台反应慢，让客户误以为没有反应，就会重复点击提交按钮，所以可能导致一个数据多次重复添加，严重可能导致出现问题
可能会说，客户看不到反应，在点击按钮的时候我给他提示不就好了，但这并不是最合适的方法，还会导致重复提交。
一个项目不可能只有一个提交，所以难道每次都需要一段JS去控制他重复提交的代码吗，我们可以使用全局方法指令

直接在main.js中加上如下代码，我们就可以全局使用了，

//防多次点击，重复提交
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

在每个需要控制的提交按钮页面加上 v-preventReClick即可。
例如：

<el-button size="medium" :disabled="publicityDisabled" type="primary"
 @click="publicityBtnHandle" v-preventReClick>正式公示</el-button>

注：控制重复提交的方式还有很多种，今天先只分享一种