uniapp | ボタンを複数回クリックすることによってフォーム送信が複数回トリガーされるのを防ぎます

目に光と希望を与えられた本来の自分に戻るためだけに、携帯電話の中のエンターテイメントソフトを何でも消して、日夜勉強している人が本当にいるのです。あなたが学習について抱くすべての考えは、あなたに助けを求めている未来であると強く信じなければなりません。

怠惰はとても奇妙なものです。楽であることが休息であり、祝福であると思い込ませます。実際には、退屈、怠惰、憂鬱をもたらします。将来への希望を奪い、他人から孤立させます。友情はあなたをますます強くします。心が狭くて人生に疑問を持っています！

1. 問題の説明

uniappではフォーム送信機能を実装したいのですが、機能完成後にストレステストを行ったところ、送信ボタンを素早く複数回クリックするとフォームが繰り返し送信され、複数のデータを受信して​​しまうことが分かりました。バックエンドで。したがって、フロントエンドはボタンの繰り返しクリックを処理する必要があります。

2. 解決策

1. ルート ディレクトリに新しい共通ファイルを作成し、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)
           //表单内容
       }
   }
   

3. よくある質問

このメソッドは uniapp で使用できるだけでなく、vue でもフォーム送信時の複数回のクリックを防ぐために使用できます。単純にラベルを変えるだけです。