您现在的位置是:首页 > 正文

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

2024-04-01 01:24:47阅读 1

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

一、自定义全局指令

使用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>

划重点:然而,经测试表明,只针对el-button生效, 针对普通的div或者自行封装的组件并没有效果,因为disabled正常情况下,不会阻止@click的点击效果
为此,进行如下改进:

//改进方法一:
import Vue from 'vue'
 
const preventReClick = Vue.directive('preventReClick', {
    inserted: function(el, binding) {
        el.addEventListener('click', (e) => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 1000)
            } else { 
            	// disabled为true时,阻止默认的@click事件
                e.preventDefault()
                e.stopPropagation()
            }
        }, true)
    }
});
 
export { preventReClick }

//改进方法二:
import Vue from 'vue'
 
const preventReClick = Vue.directive('preventReClick', {
    inserted: function(el, binding) {
        el.addEventListener('click', (e) => {
            if (!el.disabled) {
               el.style.pointerEvents = 'none'
                setTimeout(() => {
                   el.style.pointerEvents = 'auto'
                }, binding.value || 2000)
            } else { 
            	// disabled为true时,阻止默认的@click事件
                e.preventDefault()
                e.stopPropagation()
            }
        }, true)
    }
});
 
export { preventReClick }

index.vue
<div @click='handleClick' v-preventReClick='1000'>测试重复点击</div>

二、自定义局部指令

在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)
      });
    },

以上是三种不同的方法,都能实现防止按钮重复点击导致提交多次的问题。

网站文章

  • webpack 打包(初学打包运行)

    webpack 打包(初学打包运行)

    第一步: 新建一个文件夹,,进入该文件夹 点击搜索 输入 cmd +回车(Enter)打开命令提示符

    2024-04-01 01:24:36
  • python统计文件中每个单词出现的次数_python 统计文件中单词出现的频率

    import sysimport reWORD_RE = re.compile(&#39;\w+&#39;)index = {}with open(sys.argv[1], encoding=&#39...

    2024-04-01 01:24:31
  • 循环群和变换群

    循环群和变换群

    设。

    2024-04-01 01:24:24
  • docker-compose搭建lnmp环境

    docker-compose搭建lnmp环境

    docker-compose.yml 搭建lnmp

    2024-04-01 01:23:57
  • 毕设分享 基于单片机的自动浇花系统

    毕设分享 基于单片机的自动浇花系统

    # 1 简介Hi,大家好,今天向大家介绍一个学长做的单片机项目基于单片机的自动浇花系统大家可用于 课程设计 或 毕业设计🔥 项目分享: https://gitee.com/feifei1122/si...

    2024-04-01 01:23:50
  • 【网络安全入门】渗透测试常用工具有哪些?

    【网络安全入门】渗透测试常用工具有哪些?

    从事任何工作,熟练掌握工具很关键,它不仅可以帮助我们提高工作效率,还可以节省很多的时间。那么渗透测试常用工具有哪些?下面小编为大家例举几个。Nmap是一个自由和开放源码的实用的网络发现和安全审计工具。...

    2024-04-01 01:23:42
  • 使用ThreadLocal保存用户登录信息

    使用ThreadLocal替代Session完成保存用户登录信息功能 具体实现流程: 在登录业务代码中,当用户登录成功时,生成一个登录凭证存储到redis中,将凭证中的字符串保存在cookie中返回给...

    2024-04-01 01:23:18
  • 后端代理跨域配置

    后端代理跨域配置node中代理配置node中代理配置router.get('/',ctx=>{ ctx.redirect("/api")})router.get('/api', async ctx => { ctx.body = "早期的鸟儿有虫吃"})

    2024-04-01 01:23:12
  • CodeForces - 1254D Tree Queries(重链剖分)

    题意:操作一:给出v,dv,dv,d,给每个vvv的相邻节点uuu,给uuu的子树加上(n−szu)dn\frac {(n-sz_u)d}nn(n−szu​)d​,并给vvv加上ddd。(这里是把vv...

    2024-04-01 01:23:04
  • 编辑函数求n阶乘fact_Python——递归函数

    递归函数我们都知道在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身,这个函数就是递归函数。简单递归函数举个例子,我们来计算阶乘n! = 1 x 2 x 3 x...x n,用函数fact(n)表示,可以看出:fact(n) = n! = 1 x 2 x 3 x...x(n - 1) x n = (n - 1)! x n = fact(...

    2024-04-01 01:22:57