前端-防止多次点击

前端-防止多次点击

原理:设置一个状态变量,为true的时候才能触发,false不能触发,运用setTimeout延时修改状态变量状态,达到不能连点的效果。

注释: 这里封装了一个js文件 全局注册 用的时候比较方便

1.封装的JS文件:common.js

// 防止处理多次点击
//封装函数
function noMultipleClicks(methods, info) {
    let that = this;
    //noClick决定是否能够点击
    if (that.noClick) {
       //进入后修改noclick为false
        that.noClick= false;
        //触发传入的方法-完成第一次点击
        if((info && info !== '') || info ==0) {
            methods(info);
        } else {
            methods();
        }
        //通过setTimeout延时将noClick变为true才能进行下次点击的触发
        setTimeout(()=> {
            that.noClick= true;
        }, 5000)
    } else {
		
    }
}
//导出
export default {
    noMultipleClicks,      
}

2.全局注册

//防止多次点击
import common from '@/common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

3.使用文章来源地址:https://www.uudwc.com/A/R6ErM/

//调用 
@click="$noMultipleClicks(方法名)"
//设置noClick
noClick:true

原文地址:https://blog.csdn.net/low666/article/details/132854816

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年09月17日 23:33
下一篇 2023年09月17日 23:33