解决Vue项目按钮重复提交

当用户快速点击提交按钮时，会发送多个请求，为了防止这个问题，我们需要对按钮进行限制:
1.首先建立一个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文件中引入这个js文件

import '../preventClick'

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

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

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