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

Posted 葉謙虛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
      );
    ,

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

以上是关于vue中防止按钮重复点击提交的方法的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目按钮重复提交

Swift 防止按钮重复点击

防止表单重复提交

防止表单重复提交

按钮防止多次点击重复提交的方法

如何防止表单重复提交