uniapp: 防止按钮多次点击多次触发事件

墨蓝 2023-01-23 13:49 19阅读 0赞

[https://www.jianshu.com/p/94fccdd072c5][https_www.jianshu.com_p_94fccdd072c5]

#### 1、在根目录下新建 common 文件并创建 common.js 文件，输入下面代码 ####

// 防止处理多次点击
    function noMultipleClicks(methods, info) { 
        // methods是点击后需要执行的函数， info是函数需要传的参数
        let that = this;
        if (that.noClick) { 
            // 第一次点击
            that.noClick= false;
            if((info && info !== '') || info ==0) { 
                // info是执行函数需要传的参数
                methods(info);
            } else { 
                methods();
            }
            setTimeout(()=> { 
                that.noClick= true;
            }, 2000)
        } else { 
            // 这里是重复点击的判断
        }
    }
    //导出
    export default { 
        noMultipleClicks,      // 禁止多次点击
    }

#### 2、man.js 文件引入 ####

// 配置公共方法
    import common from './common/common.js'
    Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

#### 3、在实际页面中引用，不带参数,直接传一个方法就行 ####

记得在data中挂载`noClick:true`

// 记得在data中挂载 noClick:true
    data() { 
        return { 
            noClick:true,
        }
    },
    
    <view class="bottom-btn-box">
        <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
    </view>
    
    methods:{ 
        commitWork(){ 
            //开始你的表演
        }           
    }

#### 4、在实际页面中引用，带参数,传一个方法和一个参数就行 ####

// 记得在data中挂载 noClick:true
    data() { 
        return { 
            noClick:true,
        }
    },
    <view class="bottom-btn-box">
      <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
    </view>
    
    methods:{ 
        goPay(item) { 
           console.log(item)
            //开始你的表演
        }           
    }

[https_www.jianshu.com_p_94fccdd072c5]: https://www.jianshu.com/p/94fccdd072c5