vue 指令 防止按钮重复点击

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 指令 防止按钮重复点击相关的知识,希望对你有一定的参考价值。

参考技术A 在main.js中写入

然后再需要用到的页面直接使用 

这里有一个小问题:

原理是在点击的时候,给自身加一个disabled禁止点击, 两秒后disabled取消,

但是这个指令方法,在div上面没有生效, 所以需要用button按钮

Vue.directive('preventReClick',

      inserted (el, binding)

        el.addEventListener('click', () =>

          if(!el.disabled)

            el.disabled =true            setTimeout(() =>

              el.disabled =false            , binding.value || 3000)

         

        )

     

    )

借鉴于 https://www.cnblogs.com/adbg/p/11271237.html

Vue项目按钮重复提交

参考技术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项目按钮重复提交

Swift 防止按钮重复点击

uniapp 防止重复点击

vue directive自定义指令防止按钮在短时间内多次点击

VUE:防止按钮重复点击触发接口

Vue中防止按钮的多次点击