uniapp | 防止多次点击按钮多次触发表单提交

原来真的有人，删掉手机里所有的娱乐软件，不管不顾任何东西，没日没夜的学习，就只是为了回到原来那个眼里有光被赋予希望的自己。 你要坚信每一个你想学习的念头，都是未来在向你求救！

懒惰是一个特别奇怪的东西， 它使你以为安逸是休息，是福气，它实际上给你带来了是无聊，是倦怠，是消沉，它剥夺你对前途的希望，隔断你和别人之间的友情，使你的心胸日益狭窄，对人生也越来越怀疑！

一、问题描述

在uniapp想要实现一个表单提交的功能，完成此功能后进行压力测试发现，当多次快速点击提交按钮，会将表单多次重复提交，这就导致后端后收到多条数据。所以，前端需要做一个按钮的重复点击处理。

二、解决方案

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. main.js文件引入

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

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

   // 记得在data中挂载   noClick:true
   data() {
         
         
       return {
         
         
           noClick: true,
       }
   },
   
   <view class="bottom-btn-box">
       <view class="submit-btn" @click="$noMultipleClicks(formSubmit)">提交</view>
   </view>
   
   methods:{
         
         
       formSubmit(){
         
         
           //表单内容
       }           
   }
   

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

   // 记得在data中挂载   noClick:true
   data() {
         
         
       return {
         
         
           noClick:true,
       }
   },
   <view class="bottom-btn-box">
     <view class="formbtn" @click.stop="$noMultipleClicks(formSubmit, form)" >提交</view>
   </view>
   
   methods:{
         
         
       formSubmit(form) {
         
         
          console.log(form)
           //表单内容
       }
   }
   

三、常见问题

​ 这种方法不仅仅可以用于uniapp中，也可以用于vue中实现防止多次点击表单提交。只需要简单的改一下标签即可。