Vue macht einen Countdown-Button-Effekt

Dieses Mal zeige ich Ihnen den Effekt eines Countdown-Buttons mit Vue. Welche Vorsichtsmaßnahmen gibt es, um den Effekt eines Countdown-Buttons mit Vue zu erzielen?

Bei der Projektentwicklung stoßen wir häufig auf eine Schaltfläche, die einen Bestätigungscode sendet und nach dem Klicken einen Countdown von 60 Sekunden anzeigt. Dies ist sehr häufig, aber auch sehr einfach, aber es gibt bestimmte Dinge, die Sie bezahlen müssen Beim Schreiben dieses Buttons ist darauf zu achten, dass ich ihn heute aufschreibe. Wenn es irgendwelche Fragen gibt, korrigieren Sie mich bitte!

Der fertige Effekt ist wie folgt:

Um den Effekt schneller anzuzeigen, habe ich die Zeit auf 5 Sekunden eingestellt. Nachdem Sie auf die Schaltfläche geklickt haben, 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 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:

Diese Countdown-Schaltfläche ist sehr einfach, aber als ich sie zum ersten Mal schrieb, war sie 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:

vue.js+element-ui zum Erstellen einer Menübaumstruktur

Wie man JS verwendet um die Stadt und den geografischen Standort des Benutzers zu erhalten

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