【Vue】（转载）防范按钮重复(高频)提交

解决Vue项目按钮重复(高频)提交问题!

前言：大家在vue项目开发中经常需要处理表单提交的问题，但当用户快速点击提交按钮时，会发送多个请求，为了防止这个问题，我们需要对按钮进行限制，下面给大家介绍一个简单的方法。

1.首先建立一个preventReClick.js的文件, 写入以下代码

// 设置点击间隔
import Vue from 'vue'

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

2.在main.js文件中引入这个js文件

import '../preventReClick'

3.在button或el-button标签上绑定该指令

<button v-preventReClick>普通按钮</button>
<el-button v-preventReClick>Element按钮</el-button>

注：此方法使用的是button标签的disabled属性来控制点击的，所以只能用在button类标签上，其他html标签无效。