一、在根目录下新建common文件并创建common.js文件,输入下面代码
1 // 防止处理多次点击
2 function noMultipleClicks(methods, info) {
3 // methods是需要点击后需要执行的函数, info是点击需要传的参数
4 let that = this;
5 if (that.noClick) {
6 // 第一次点击
7 that.noClick= false;
8 if(info && info !== '') {
9 // info是执行函数需要传的参数
10 methods(info);
11 } else {
12 methods();
13 }
14 setTimeout(()=> {
15 that.noClick= true;
16 }, 2000)
17 } else {
18 // 这里是重复点击的判断
19 }
20 }
21 //导出
22 export default {
23 noMultipleClicks,//禁止多次点击
24 }
二、man.js文件引入
1 //配置公共方法
2 import common from './common/common.js'
3 Vue.prototype.$noMultipleClicks = common.noMultipleClicks;
三、在实际页面中引用,不带参数,直接传一个方法就行
1 //记得在data中挂载 noClick:true
2 data() {
3 return {
4 noClick:true,
5 }
6 },
7
8 <view class="bottom-btn-box">
9 <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
10 </view>
11
12 methods:{
13 commitWork(){
14 //balabala
15 }
16 }
四、在实际页面中引用,带参数,传一个方法和一个参数就行
1 //记得在data中挂载 noClick:true
2 data() {
3 return {
4 noClick:true,
5 }
6 },
7 <view class="bottom-btn-box">
8 <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
9 </view>
10
11 methods:{
12 goPay(item){
13 //balabala
14 }
15 }