vue、uniapp 小程序点击事件禁止多次点击方法封装

vue、uniapp 小程序点击事件禁止多次点击方法封装

在写uniapp 小程序时发现个bug,疯狂点击按钮第一点击事件还没执行完就疯狂多次调用该事件，很是影响用户体验以及消耗性能，所以这里我封装个禁止多次调用的方法，uniapp、vue同时使用。

第一步创建一个公共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,  // 禁止多次点击  
}

第二步在main.js文件中全局引入，因为有多个地方使用到

import common from './utils/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

在页面上直接这样使用，noMultipleClicks需要传的第一个参数是对应的点击方法，第二个参数是点击方法的形参，在页面上还声明noClick变量为true

noMultipleClicks(methods, info)
noClick:true,