vue を使用して SMS 検証のパフォーマンスを最適化する方法

今回は、vue を使用して SMS 検証パフォーマンスの最適化を実装する方法と、Vue を使用して SMS 検証のパフォーマンスの最適化を実装するための注意事項を説明します。以下は実際的なケースです。

通常、プロジェクトに登録するときにSMS認証機能を使用することが多いですが、現在多くのSMS認証には次の問題があります。たとえば、SMS認証時間が60秒である場合、

1.ボタンがクリックされたとき。カウントダウンが 60 秒に達していない場合は、ブラウザを更新して、認証コード ボタンをもう一度クリックしてください

2. ボタンをクリックした後にカウントダウンが開始されると、たとえば 50 秒でブラウザを閉じ、5 秒後にそれを開いて、時間のカウントダウンは約 45 秒であるはずですが、ブラウザを再度開くと、ボタンが再度クリックされる可能性がありました

上記の 2 つの問題を解決するには、ページに移動する時間を記述する必要があります。数日前にこのメソッドを使用した vue プロジェクトがあったので、ここにソリューションを貼り付けます。コンポーネント内の html コードをここに書きます。 :

<p class="mtui-cellft" @click="getCode">
   <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
   <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button>
</p>

ここが重要なポイントです

データで使用する必要があるいくつかの

変数を定義します

:

 second: 60,
 flag: true,
 timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval

SMS認証を取得する方法:

getCode() {
   let that = this;
   if (that.flag) {
    that.flag = false;
    let interval = window.setInterval(function() {
     that.setStorage(that.second);
     if (that.second-- <= 0) {
      that.second = 60;
      that.flag = true;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }

localstorageの書き込みと読み取り:

　　　　　setStorage(parm) {
   localStorage.setItem("dalay", parm);
   localStorage.setItem("_time", new Date().getTime());
  },
  getStorage() {
   let localDelay = {};
   localDelay.delay = localStorage.getItem("dalay");
   localDelay.sec = localStorage.getItem("_time");
   return localDelay;
  }

ページの更新が無効になるのを防ぎます検証コード:

judgeCode() {
   let that = this;
   let localDelay = that.getStorage();
   let secTime = parseInt(
    (new Date().getTime() - localDelay.sec) / 1000
   );
   console.log(localDelay);
   if (secTime > localDelay.delay) {
    that.flag = true;
    console.log("已过期");
   } else {
    that.flag = false;
    let _delay = localDelay.delay - secTime;
    that.second = _delay;
    that.timer = setInterval(function() {
     if (_delay > 1) {
      _delay--;
      that.setStorage(_delay);
      that.second = _delay;
      that.flag = false;
     } else {
　　　　　　　　　　　　　
　　　　　　　　　　　　　　// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
      that.flag = true;
      window.clearInterval(that.timer);
     }
    }, 1000);
   }
  }

次に、HTML マウント ページが完了した後、ライフ フック (マウント) で judgeCode() メソッドを呼び出して、この機能を実現します

この記事のケースを読んだことがあるかと思います。メソッドをマスターした後、次のことを行ってください。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue でフィルターを使用する方法

vue を使用して dom のクラスを決定する方法

以上がvue を使用して SMS 検証のパフォーマンスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。