按钮限制：避免重复或多次点击事件

需求说明

相信大家在提交表单给后端时，时不时由于网络延迟的问题导致，重复提交表单，进而网络好了，就多了好几条数据。那么到底该如何解决这种问题呢！下面小编带你一起来探索与解决

探索

以前小编以为这个是后端责任，为何呢？因为后端没有限制一个时间段之内最多请求几次，想着我前端只要把参数（值）传给他就行，后来越想不对，这是它后端该怎么处理这个 问题不关我们的事，但我们前端也应该有自己的解决办法。

想到这，我们可以在事件上做处理，只要提交了，先不管提交成功还是提交失败，只要你一提交，我就关闭弹框，这样就避免了一个表单你多次提交，是的，这样是可以解决，但这种只有是表单是单独出来的组件才可以；想到这，还是不美，这对客户的体验感不好：为啥会这样说呢？如果还是网络延迟问题，提交了，弹框关闭了，数据没有自动刷新出来（一般是成功后，自动调用获取数据的接口或者刷新界面），这里就万一会给客户造成错误的引导，心里想：“刚才没有添加成功”，然后，客户又会继续之前的操作。避免了这个错误，但又引起了另一个错误，得不偿失啊！！！

话说换一个角度考虑，表单和展示数据的表格在一个界面（一个组件，也就是一个vue文件里），还是没有存根本上解决这个问题。

不行，继续想…

。。。。

那如果直接从按钮中控制呢，是不是可以？

嗯！！

可以的！！

那该怎么弄呢？？？？

可不可以让它点击提交按钮后，按钮禁用几秒中呢

突然想起小编之前写过一篇给按钮加时间限制文章，话不多说，直接放链接

解决方法1：加时间限制

按钮+时间限制 <—链接处

这个方法小编觉得还是比较麻烦，那还有什么更简单的方法么？？？

继续陷入深思中…

有心不负功夫人

有，想到了，请看下面的方法2

解决方法2：根据el-button自带属性（loading）来限制

最好的解决方法就是给按钮加一个状态，如，提交后，后端未响应，显示“提交中”，这个也可以避免重复或多次提交（这样也避免了多次提交，只有上次的请求完成后，才会对按钮进行解放）
话不多说，上代码

<el-button type="primary" size="small" @click="submit()" :loading="loading">{{ submits }}</el-button>

loading是el-button特有的属性
定义：

<script>
	data(){
		return {
			submits: '提交',
             loading: false,
		}
	}
</script>

methods:{
    submit(){
        //this.submits = "提交中"
        //this.loading = true
        //  #这里的作用就是只要你点击“提交”事件，按钮立马变换状态和文字，不管后端接口访问成功还是失败，只要没有响应还是保持当前状态，这样就避免了重复或者多次提交
        this.$http.axios("url--",params,config).then(res=>{
            //this.submits = "提交中"
            //this.loading = true
            // # 这里是访问了接口，但没有响应，状态为“提交中”，原理是一样，只不过是在不同位置体现而已
            if(res.data.code === 200){
                this.submits = "提交"
                this.loading = false
            }else{
                this.submits = "提交"
                this.loading = false
            }
        })
    }
}

好了，到这里就结束了，同行大佬有什么更好的思路，欢迎评论区交流
觉得小编这篇文章写的可以，麻烦给小编点个赞，让更多的人看到