Prevent users from submitting repeatedly in the uniapp project

1. New in the root directory common File and create common.js file , Copy and paste the code directly .

// Prevent processing multiple clicks
function noMultipleClicks(methods, info) {
// methods It is a function that needs to be executed after clicking , info Is to click the parameter to be transmitted
let that = this;
if (that.noClick) {
// First click
that.noClick= false;
if(info && info !== '') {
// info Is the parameter that needs to be passed to execute the function
methods(info);
} else {
methods();
}
setTimeout(()=> {
that.noClick= true;
}, 2000)
} else {
// Here is the judgment of repeated clicks
}
}
// export
export default {
noMultipleClicks,// Multiple clicks are prohibited
}

2.man.js Introduce in the file

// Configure public methods 
import common from './common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

3. Reference... In the actual page

1) Don't pass it on , Just pass a method directly
// Remember in data Mount in noClick:true, Otherwise, clicking will fail 
data() {

return {

noClick:true,
}
},
<view class="bottom-btn-box">
<view class="submit-btn" @click="$noMultipleClicks(commitWork)"> Submit </view>
</view>
methods:{

// Submission method 
commitWork(){

}
}
2) With parameters , Just pass a method and a parameter
// Remember in data Mount in noClick:true, Otherwise, clicking will fail 
data() {

return {

noClick:true,
}
},
<view class="bottom-btn-box">
<view class="pay" @click.stop="$noMultipleClicks(goPay, item)" > payment </view>
</view>
methods:{

goPay(item){

//balabala
}
}

thank
Similar articles

2022-06-23