1.首页先写入main.js中
2.在button或el-button标签上绑定该指令
场景
1.保存提交按钮不小心点击了多次。
2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。
3.resize、scroll，输入框内容校验等频繁操作。
原因
由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。
原理：当第一次触发点击事件时，不会立即执行接口，会等待监听一段时间，若在这段时间没有再次触发该事件，等待时间过后就执行接口。倘若等待时间期间监听到又点击了一次，等待时间随即重置，从最后一次点击事件开始再重新等待这段时间，等待结束后再执行接口。
步骤：
2.具体引用
缺点：接口操作不是立即调用，需要等待一定时间，倘若时间设置过长，交互感不好。若出现恶意频繁点击不停，接口就会一直反复等待下去一直不会调用。若是现象2的情况，第一次点击后接口返回数据时间过长，一旦超过这个等待时间，按钮再次被点击后还是会出现重复调用的情况。
二.节流
原理：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
步骤：
1.创建节流全局js方法
2.具体引用
缺点：若是现象2的情况，第一次请求返回时间超过等待的时间，此时再次点击就会再次调用事件接口，造成数据的重复异常
三.按钮禁用控制或者loading
原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，或者打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭
可以完全避免现象2的情况，此方法只有第一次点击调用接口返回数据后才会被点击
1、首先通过js代码，当用户点击提交按钮后，屏蔽提交按钮使用户无法点击提交按钮或点击无效，从而实现防止表单重复提交。2、其次在数据库建表的时候在ID字段添加主键约束，用户名、邮箱、电话等字段加唯一性约束。确保数据库只可以添加一条数据。
3、最后通过数据库加唯一键约束能有效避免数据库重复插入相同数据。
1、用 javascript 设置一个变量，只允许提交一次；参考如下：
<script type="text/javascript">
var checkSubmitFlg = false
function checkSubmit(){
if (checkSubmitFlg == true){
return false
}
checkSubmitFlg = true
return true
}
document.ondblclick =
function docondblclick(){
window.event.returnValue = false
}
document.onclick =
function doconclick(){
if (checkSubmitFlg){
window.event.returnValue = false
}
}
</script>
<form action="action.php" method="post" onsubmit="return checkSubmit()">
用 javascript 将提交按钮或者 img 置为 disable；
参考如下：
<form action="action.php" method="post" onsubmit="getElById('submitInput').disabled = truereturn true">
<img styleId="submitInput" src="images/ok_b.gif" border="0" />
</form>
