Vue项目按钮重复提交

Posted 2023-03-26

参考技术A vue项目防止按钮重复点击（重复请求接口）
1.首页先写入main.js中

2.在button或el-button标签上绑定该指令

场景
1.保存提交按钮不小心点击了多次。
2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。
3.resize、scroll，输入框内容校验等频繁操作。

原因
由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。

原理：当第一次触发点击事件时，不会立即执行接口，会等待监听一段时间，若在这段时间没有再次触发该事件，等待时间过后就执行接口。倘若等待时间期间监听到又点击了一次，等待时间随即重置，从最后一次点击事件开始再重新等待这段时间，等待结束后再执行接口。

步骤：

2.具体引用

缺点：接口操作不是立即调用，需要等待一定时间，倘若时间设置过长，交互感不好。若出现恶意频繁点击不停，接口就会一直反复等待下去一直不会调用。若是现象2的情况，第一次点击后接口返回数据时间过长，一旦超过这个等待时间，按钮再次被点击后还是会出现重复调用的情况。
二.节流
原理：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

步骤：

1.创建节流全局js方法

2.具体引用

缺点：若是现象2的情况，第一次请求返回时间超过等待的时间，此时再次点击就会再次调用事件接口，造成数据的重复异常

三.按钮禁用控制或者loading
原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，或者打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭

可以完全避免现象2的情况，此方法只有第一次点击调用接口返回数据后才会被点击

vue中防止按钮重复点击提交的方法

vue中防止按钮重复点击提交，在短时间内点击按钮多次，会造成重复提交，出现多条数据，为此我总结了下面的解决办法......

vue中防止按钮重复点击提交的方法

经常会遇到的一个问题(如图所示)，在短时间内点击按钮多次，会造成重复提交，出现多条数据，以下讲一下我的解决办法，比较类似，但是用起来能有效阻止提交多次。

一、自定义全局指令

• 使用Vue.directive()来自定义全局注册指令，在main.js中加入下方这段代码，可以全局应用

	// 防止el-button重复点击
	Vue.directive(\'preventReClick\', 
 	 inserted(el, binding) 
    	el.addEventListener(\'click\', () => 
      	if (!el.disabled) 
       	 el.disabled = true
       	 setTimeout(() => 
         	 el.disabled = false
        	, binding.value || 2000)
      	
    	)
 	 
	);

• 接着在el-button中添加v-preventReClick，就可实现效果，在点击之后按钮变为禁用状态，持续禁用两秒,两秒之后便可再一次提交

	// 添加新属性
	<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>

二、自定义局部指令

• 在export default 中写入下面这段代码，进行局部注册指令

	// 防止el-button重复点击
	directives: 
 	 preventReClick: 
   	 // 指令的定义
    	inserted(el, binding) 
     	 el.addEventListener(\'click\', () => 
      	  if (!el.disabled) 
       	   el.disabled = true
       	   setTimeout(() => 
       	     el.disabled = false
       	   , binding.value || 2000)
      	  
     	 )
   	 	
  	  
	,

• 接着也是在el-button中添加v-preventReClick，就可实现效果

   // 添加新属性
   <el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>

三、动态控制disabled属性

• 在el-button中添加disabled属性，进行动态控制

   // 添加属性
   <el-button type="primary" @click="handleSave" :disabled="disabled">保存</el-button>

• 在需要调用的事件中，控制按钮启用禁用，实现的效果是在点击按钮后禁用两秒，两秒之后，按钮恢复启用状态

    // 调用事件动态控制disabled属性
    handleSave() 
      this.disabled = true;
      let params = 
        data: this.data,
      ;
      this.$requestFn("POST", this.$url.export.test, params)
      .then((res) => 
        this.$toast.success("保存成功");
      )
      .finally(() => 
        setTimeout(() => 
	    	this.disabled = false;
        , 2000)
      );
    ,

使用以上几种方法，基本就能实现防止按钮重复点击导致，提交多次的问题，如果大家还有什么更好的方法，可以在评论中写下来，或者哪里有不足之处，请大家指出，我会虚心接受:)