vue+element-ui如何防止弹窗表单重复提交 button按钮设为不可用仍可调用点击事件

表单重复提交原因

当弹出dialog内容是需要提交的表单时，点击提交按钮，由于请求响应时间较长或网速原因导致用户多次点击提交按钮而导致表单重复提交。

解决方案

网上解决方案主要有几种：
1、通过JS屏蔽提交按钮。
2、给数据库增加唯一键约束。
3、利用Session防止表单重复提交。
4、…
本文主要讲述通过JS控制提交按钮可用性来控制用户操作，尽管此种方式安全性不高，可能通过postman等工具多次模拟表单提交请求，无法从根本上避免该问题。但对于安全性要求不高的系统，该方法是比较简单方便的。

错误方案

点击提交按钮后，在请求为响应之前将按钮设为不可用，这是没问题的，但在什么时候设为可用状态呢？当关闭dialog时将提交button设为可用，这样保证下一次再次进入弹窗时保证仍可以进行表单提交。

这种方案错误点在于调用dialog的close方法时，接着让按钮可用，而dialog的关闭是一个动画过程，而非瞬时完成，这就导致在短时间内仍然是可以再次提交的。

正确方案

通过错误方案的讲解，我们可以清楚的知道，将button只为可用的时机是解决本问题的关键，既然不能在dialog关闭时操作，那么就只能在dialog弹出时进行操作
1、在dialog标签添加<dialog @open=“buttonDisabled=false”><dialog>
2、在点击提交按钮后未响应前将buttonDisabled置为true。（这里注意，一般表单都会有检验，当表单校验不通过时，仍需将buttonDisabled置为false）
3、关闭dialog时只需调用dialog的close方法。

总结

解决此问题的关键就是设置button可用与不可用的时机。