解决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标签上绑定该指令


Element按钮

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

你可能感兴趣的:(解决Vue项目按钮重复提交)