Vue implementiert einen Countdown-Button

Dieses Mal erkläre ich Ihnen, wie Sie einen Countdown-Button in Vue implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung eines Countdown-Buttons in Vue?

In der Projektentwicklung stoßen wir häufig auf Schaltflächen, die Bestätigungscodes senden und nach dem Klicken einen 60-Sekunden-Countdown haben. Dies ist sehr häufig, aber auch sehr einfach, aber beim Schreiben dieser Schaltfläche gibt es solche Einige Stellen, auf die ich achten muss, werde ich heute aufschreiben. Wenn Sie Fragen haben, korrigieren Sie mich bitte.

Der fertige Effekt ist wie folgt:

Um den Effekt schneller anzuzeigen, habe ich die Zeit auf 5 Sekunden eingestellt. Nach dem Klicken auf die Schaltfläche wird ein Countdown angezeigt. Gleichzeitig wird die Schaltfläche nicht mehr anklickbar, ihr Stil ändert sich ebenfalls und das Erscheinungsbild der schwebenden Maus ändert sich ebenfalls.

Als nächstes verwenden wir Code, um es zu implementieren:

<button class="button" @click="countDown">
 {{content}}
</button>
...
data () {
  return {
   content: '发送验证码',  // 按钮里显示的内容
   totalTime: 60      //记录具体倒计时时间
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新发送'
    },1000)
  }
}

Fügen Sie den Daten zwei Datenelemente hinzu, eines wird zum Aufzeichnen der Zeit und das andere zum Speichern des spezifischen Inhalts verwendet Countdown-Taste. In der CountDown-Funktion verwenden wir den setInterval-Timer, um die Gesamtzeit jede Sekunde um 1 zu verringern und den in der Schaltfläche angezeigten Inhalt zu ändern. Die Pfeilfunktion wird in window.setInterval verwendet, da sie das externe This automatisch bindet, sodass es nicht erforderlich ist, dieses zuerst zu speichern.

Der Effekt ist wie folgt:

Aber es gibt immer noch einige Probleme mit dieser Schaltfläche:

Nach 1 Sekunde nach dem Klicken auf die Schaltfläche , es geht direkt weiter von Der Countdown beginnt bei 59 Sekunden und die 60 in der Mitte fehlen
Sie können auch während des Countdowns klicken
Der Countdown wurde noch nicht gelöscht

Als Nächstes Sie Um diese Probleme zu lösen, muss die CountDown-Funktion weiter verbessert werden.

countDown () {
 this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {     //当倒计时小于0时清除定时器
    window.clearInterval(clock)
    this.content = &#39;重新发送验证码&#39;
    this.totalTime = 60
    }
 },1000)
},

Der obige Code löst das Problem der fehlenden 60. Wenn die Gesamtzeit kleiner als 0 ist, wird gleichzeitig der Timer gelöscht, der Inhalt der Schaltfläche zurückgesetzt und die Gesamtzeit für den nächsten auf 60 zurückgesetzt Zeitnutzung.

Der Effekt des 10-Sekunden-Countdowns:

Nach mehrmaligem Klicken wird die Geschwindigkeit des Zurückspulens schneller Durch Klicken wird ein setInterval gestartet. Diese setIntervals reduzieren die Gesamtzeit. Auch die Lösung ist ganz einfach: einfach drosseln, also den Code der countDonw-Funktion nach dem ersten Klick auf die Schaltfläche nicht ausführbar machen und warten, bis der Countdown abgelaufen ist, bevor er erneut ausgeführt werden kann.

data () {
  return {
   content: '发送验证码',
   totalTime: 10,
   canClick: true //添加canClick
  }
}
...
countDown () {
 if (!this.canClick) return  //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + 's后重新发送'
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {
   window.clearInterval(clock)
   this.content = &#39;重新发送验证码&#39;
   this.totalTime = 10
   this.canClick = true  //这里重新开启
  }
 },1000)
}

CanClick in Daten hinzufügen Der Standardwert ist true. Wenn canClick true ist, kann der Code in countDown ausgeführt werden. Setzen Sie canClick bei jeder Ausführung auf „false“ und ändern Sie es erst auf „true“, wenn der Countdown endet. Auf diese Weise verschwindet das Problem jetzt.

Hier ist es fast fertig, aber Sie können auch den Stil anpassen:

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}

Effekt:

Dieser Countdown-Button ist sehr einfach, aber als ich ihn zum ersten Mal schrieb, war er immer noch sehr chaotisch und ich kannte das Konzept der Funktionsdrosselung zu diesem Zeitpunkt noch nicht.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des .sync-Modifikators von vue

jQuery$ und $(). . Ausführliche Erklärung verwenden

Das obige ist der detaillierte Inhalt vonVue implementiert einen Countdown-Button. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!