So optimieren Sie die SMS-Überprüfungsleistung mit Vue

Dieses Mal zeige ich Ihnen, wie Sie Vue zur Implementierung der SMS-Überprüfung verwendenLeistungsoptimierung und welche Vorsichtsmaßnahmen für die Verwendung von Vue zur Implementierung der SMS-Überprüfungsleistungsoptimierung gelten Fälle, lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.

Normalerweise verwenden wir bei der Registrierung in Projekten häufig die SMS-Verifizierungsfunktion, aber jetzt treten bei vielen SMS-Verifizierungen die folgenden Probleme auf, zum Beispiel wenn die SMS-Verifizierungszeit 60 Sekunden beträgt,

1. Wenn auf die Schaltfläche geklickt wird und der Countdown noch nicht 60 Sekunden erreicht hat, aktualisieren Sie den Browser und die Schaltfläche Bestätigungscode kann erneut angeklickt werden

2 Beispiel: Ich schließe den Browser nach 50 Sekunden und öffne ihn. Zu diesem Zeitpunkt sollte die Countdown-Zeit etwa 45 Sekunden betragen, aber wenn ich den Browser erneut öffne, kann die Schaltfläche erneut angeklickt werden Um die beiden oben genannten Probleme zu lösen, müssen Sie die Zeit in localstorage schreiben, um sie abzurufen. Ich werde meine Lösung hier einfügen, da es ein Vue-Projekt gibt, das dies verwendet Methode, also werde ich hier eine Vue-Methode schreiben

Der HTML-Code in der Komponente:

<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>

Hier kommt der entscheidende Punkt

Definieren Sie mehrere

Variablen, die benötigt werden in Daten verwendet werden

:

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

So erhalten Sie eine SMS-Bestätigung:

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);
   }
  }

Schreiben und lesen Sie den lokalen Speicher:

　　　　　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;
  }

Verhindern Sie, dass die Seitenaktualisierung den Bestätigungscode ungültig macht:

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);
   }
  }

Nach Abschluss der HTML-Montageseite rufen Sie dann die JudgeCode()-Methode im Life-Hook (gemountet) auf, um diese Funktion zu erreichen

Ich glaube es Nachdem Sie den Fall in diesem Artikel gelesen haben, haben Sie es getan Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Filter in Vue

So verwenden Sie Vue, um die Klasse von Dom zu bestimmen

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die SMS-Überprüfungsleistung mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!