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

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

阅读 3k
4 个回答
新手上路,请多包涵

加 return

另辟蹊径,试试 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...

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题