Comment utiliser Vue pour implémenter un bouton de compte à rebours

Cette fois, je vais vous montrer comment utiliser Vue pour implémenter le bouton de compte à rebours. Quelles sont les précautions pour utiliser Vue pour implémenter le bouton de compte à rebours. Voici un cas pratique, jetons un coup d'œil.

Dans le développement de projets, nous rencontrons souvent un bouton qui envoie un code de vérification et dispose d'un compte à rebours de 60 secondes après avoir cliqué dessus. C'est très courant mais aussi très simple, mais il y a certaines choses que vous devez payer. attention lors de l'écriture de ce bouton. Ensuite, je l'écrirai aujourd'hui. Si vous avez des questions, corrigez-moi !

L'effet complété est le suivant :

Afin d'afficher l'effet plus rapidement, j'ai réglé le temps à 5 secondes. Après avoir cliqué sur le bouton, un compte à rebours apparaîtra. Dans le même temps, le bouton deviendra non cliquable, son style changera également et l'apparence du survol de la souris changera également.

Ensuite, nous utilisons du code pour l'implémenter :

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

Ajoutez deux éléments de données aux données, un pour enregistrer l'heure et un pour contenir le contenu spécifique du bouton de compte à rebours. Dans la fonction countDown, nous utilisons la minuterie setInterval pour décrémenter le totalTime de 1 chaque seconde et modifier le contenu affiché dans le bouton. La fonction de flèche est utilisée dans window.setInterval car elle liera automatiquement le this externe, il n'est donc pas nécessaire de l'enregistrer au préalable.

L'effet est le suivant :

Mais il y a encore quelques problèmes avec ce bouton :

Après 1 seconde après avoir cliqué sur le bouton , ça ira directement de Le compte à rebours commence à 59 secondes, et il manque le 60 au milieu
Vous pouvez aussi cliquer pendant le compte à rebours
Le compte à rebours n'a pas encore été effacé

Ensuite, vous Nous devons continuer à améliorer la fonction de compte à rebours pour résoudre ces problèmes.

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

Le code ci-dessus résout le problème des 60 manquants. En même temps, lorsque totalTime est inférieur à 0, il efface le synchroniseur, réinitialise le contenu du bouton et réinitialise totalTime à 60 pour la prochaine fois. utilisation du temps.

L'effet du compte à rebours de 10 secondes :

J'ai trouvé un bug Après avoir cliqué plusieurs fois, la vitesse de rembobinage devient plus rapide. cliquez pour démarrer un setInterval, ces setIntervals réduiront totalTime. La solution est également très simple : il suffit de la limiter, c'est-à-dire de rendre le code de la fonction countDonw non exécutable après le premier clic sur le bouton, et d'attendre la fin du compte à rebours avant de pouvoir l'exécuter à nouveau.

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

Ajouter canClick dans les données. La valeur par défaut est true Si canClick est vrai, le code dans countDown peut être exécuté. S'il est faux, cela ne fonctionnera pas. Définissez canClick sur false à chaque fois qu'il est exécuté et ne le changez en true qu'à la fin du compte à rebours. De cette façon, le problème disparaît maintenant.

C'est presque terminé ici, mais vous pouvez également ajuster le style :

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

Effet :

Ce bouton de compte à rebours est très simple, mais il était encore très compliqué lorsque je l'ai écrit pour la première fois, et je ne connaissais pas le concept de limitation de fonctions à cette époque.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour écrire une liaison de données bidirectionnelle

Comment utiliser Vue pour mettre en œuvre un proxy proxy

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!