Vue introduit un code d'implémentation de minuterie pour répondre aux questions

Ces dernières années, la technologie dans le domaine du front-end s'est développée rapidement et Vue.js, en tant que framework front-end populaire, a été largement utilisé et reconnu. Dans le développement réel, il est souvent nécessaire d'utiliser des minuteries pour implémenter certaines fonctions, telles que des minuteries pour répondre aux questions. Ensuite, introduisons le code d'implémentation d'un minuteur pour répondre aux questions dans Vue.js.

Tout d'abord, nous devons utiliser le composant de minuterie Vue Timer fourni par Vue.js pour implémenter le minuteur pour le temps de réponse. Vue Timer est un composant de minuterie léger, simple et facile à utiliser qui peut facilement implémenter diverses fonctions de minuterie.

Ce qui suit est l'utilisation de base de Vue Timer :

1. Installez Vue Timer

npm install --save vue-timer

2 Introduisez Vue Timer dans le projet Vue

import Vue from 'vue'
import VueTimer from 'vue-timer'

Vue.use(VueTimer)

3. Utilisez le composant Vue Timer pour implémenter le timer

<vue-timer 
    :time="time" 
    :autostart="false"
    @start="onStart"
    @pause="onPause"
    @resume="onResume"
    @stop="onStop">
    <div>{{ time | formatTime }}</div>
</vue-timer>

où, time représente la minuterie La valeur initiale de , autostart indique s'il faut démarrer automatiquement la minuterie, @start, @pause, @resume et @stop indiquent respectivement les événements déclenchés lorsque la minuterie démarre, s'arrête, reprend et s'arrête. Enfin, l'heure est formatée dans le format spécifié via le caractère barre verticale (|).

Ensuite, nous en apprendrons davantage sur l'application de Vue Timer à travers le code d'implémentation d'un timer pour répondre aux questions.

<template>
  <div class="answerTime">
    <vue-timer 
        :time="time" 
        :autostart="autoStart" 
        @start="onStart"
        @pause="onPause"
        @resume="onResume"
        @stop="onStop">
        <div class="time">{{ time | formatTime }}</div>
    </vue-timer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueTimer from 'vue-timer'
Vue.use(VueTimer)

export default {
  data() {
    return {
      time: 60 * 10, //初始时间为10分钟
      autoStart: true, //自动启动
      isPaused: false, //是否暂停
      remainingTime: 0 //剩余时间
    }
  },
  methods: {
    onStart() {
      console.log('计时器已启动')
    },
    onStop() {
      console.log('计时器已停止')
    },
    onPause() {
      console.log('计时器已暂停')
      this.isPaused = true
    },
    onResume() {
      console.log('计时器已恢复')
      this.isPaused = false
    }
  },
  filters: {
    formatTime: function (value) {
      if (!value) return '00:00'
      let minute = parseInt(value / 60)
      let second = parseInt(value % 60)
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  },
  watch: {
    remainingTime: function (value) {
      if (value <= 0) {
        this.onPause()
        alert('答题时间已结束')
      }
    }
  },
  created() {
    setInterval(() => {
      if (!this.isPaused) {
        this.remainingTime = this.time - this.$refs.timer.seconds
      }
    }, 1000)
  }
}
</script>

<style>
  .time {
    font-size: 24px;
    color: #f60;
    text-align: center;
    margin-top: 20px;
  }
</style>

Grâce au code ci-dessus, nous avons implémenté un minuteur pour le temps de réponse. Lorsque le minuteur expire, une boîte de dialogue apparaîtra pour rappeler à l'utilisateur que le temps de réponse est terminé. Dans le composant minuterie, nous pouvons surveiller des événements tels que le démarrage, la pause, la reprise et l'arrêt de la minuterie pour obtenir des opérations flexibles.

En général, Vue Timer est un composant de minuterie très pratique et pratique. Il est également très simple à utiliser dans Vue.js et peut nous aider à implémenter rapidement diverses fonctions de minuterie. J'espère que cet article pourra vous aider à mieux utiliser les composants Vue.js et Vue Timer.

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!