vue 如何防止按钮重复提交？

Question

如标题所诉，除了定义变量禁止按钮点击，或者设置时间段内禁止重复点击，还有啥更好的办法吗？

Answer 1

加 return

Answer 2

另辟蹊径，试试 CSS 方式

button{
  animation: throttle 2s step-end forwards; /*间隔时间改动画时长*/
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

详细介绍可以参考这篇文章

https://segmentfault.com/a/11...

Answer 3

最简单的，就是加loading了，在请求数据期间或者一定时间内，将其设置为disabled状态，避免他重复点击。

还有就是增加用户的操作复杂度，比如添加验证码，比如必须勾选某个选项等等，每次操作时，都重复该流程，增加每次操作的时间。也可以避免多次频繁的请求。这种在定时秒杀场景中用的比较多（比如在中午12点整开始秒杀之类的，可以分散每个用户的请求时间）。

Answer 4

添加 loading 效果，或者增加节流函数让请求接口在一定时间内只触发一次。

如果说后端执行事件比较长才会有返回的，最好是增加 loading 效果，后者后端增加锁，后续请求直接返回“正在执行中请稍后”。