Vue memperkenalkan kod pelaksanaan pemasa untuk menjawab soalan

Dalam beberapa tahun kebelakangan ini, teknologi dalam bidang bahagian hadapan telah berkembang pesat, dan Vue.js, sebagai rangka kerja bahagian hadapan yang popular, telah digunakan dan diiktiraf secara meluas. Dalam pembangunan sebenar, selalunya perlu menggunakan pemasa untuk melaksanakan fungsi tertentu, seperti pemasa untuk menjawab soalan. Seterusnya, mari perkenalkan kod pelaksanaan pemasa untuk menjawab soalan dalam Vue.js.

Pertama, kita perlu menggunakan komponen pemasa Pemasa Vue yang disediakan oleh Vue.js untuk melaksanakan pemasa bagi masa menjawab. Vue Timer ialah komponen pemasa yang ringan, ringkas dan mudah digunakan yang boleh melaksanakan pelbagai fungsi pemasa dengan mudah.

Berikut ialah penggunaan asas Vue Timer:

1 Pasang Vue Timer

npm install --save vue-timer

2. Perkenalkan Vue Timer

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

Vue.use(VueTimer)

3 Komponen Pemasa Vue untuk melaksanakan pemasa

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

Antaranya, masa mewakili nilai awal pemasa, autostart mewakili sama ada untuk memulakan pemasa secara automatik, @start, @pause, @resume dan @stop mewakili permulaan dan jeda pemasa masing-masing , peristiwa dicetuskan apabila menyambung semula dan berhenti. Akhir sekali, masa diformatkan ke dalam format yang ditentukan melalui aksara paip (|).

Seterusnya, kita akan mengetahui lebih lanjut tentang aplikasi Pemasa Vue melalui kod pelaksanaan pemasa untuk menjawab soalan.

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

Melalui kod di atas, kami telah melaksanakan pemasa untuk masa menjawab Apabila pemasa tamat tempoh, kotak gesaan akan muncul untuk mengingatkan pengguna bahawa masa menjawab telah tamat. Dalam komponen pemasa, kita boleh memantau acara mula, jeda, sambung semula dan hentikan pemasa untuk mencapai operasi yang fleksibel.

Secara umumnya, Pemasa Vue ialah komponen pemasa yang sangat mudah dan praktikal Ia juga sangat mudah untuk digunakan dalam Vue.js dan boleh membantu kami melaksanakan pelbagai fungsi pemasa dengan cepat. Saya harap artikel ini dapat membantu anda menggunakan komponen Vue.js dan Vue Timer dengan lebih baik.

Atas ialah kandungan terperinci Vue memperkenalkan kod pelaksanaan pemasa untuk menjawab soalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!