Vue3+TS新年倒计时组件：用代码敲响辞旧迎新的钟声

前端

2023-12-19 17:48:21

前言

随着科技的不断发展，倒计时已经成为我们生活中不可或缺的一部分。无论是新年倒计时、考试倒计时还是其他重要事件的倒计时，我们都需要一个准确可靠的计时器来提醒我们时间的流逝。

最近在写一个考试系统，有一个倒计时自动交卷的需求，正好也马上春节，就有了编写一个倒计时组件的想法。对于这个倒计时组件，它应该具有这样的功能：

字体、颜色等样式可以由使用者自定义；
组件可以自动从给定的时间开始倒计时，并在倒计时结束后触发相应的事件；
组件可以暂停和恢复倒计时，以便在需要时进行调整；
组件可以显示剩余时间，并以不同的方式呈现，如文本、数字或进度条等。

实现方案

在实现这个倒计时组件时，我选择了Vue3和TypeScript作为开发框架。Vue3是目前最流行的前端框架之一，以其简单易用和强大的功能而著称。TypeScript是一种静态类型语言，可以帮助我们编写出更加健壮和可靠的代码。

首先，我们需要创建一个Vue3组件。我们可以使用Vue CLI脚手架来快速创建一个Vue3项目。然后，在项目中创建一个新的组件文件，并将其命名为countdown.vue。

<template>
  <div>
    <span>{{ timeLeft }}</span>
    <button @click="start">Start</button>
    <button @click="pause">Pause</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const timeLeft = ref(0)
    const intervalId = ref(null)

    const start = () => {
      if (intervalId.value) {
        return
      }

      intervalId.value = setInterval(() => {
        timeLeft.value--

        if (timeLeft.value <= 0) {
          clearInterval(intervalId.value)
          intervalId.value = null
        }
      }, 1000)
    }

    const pause = () => {
      if (!intervalId.value) {
        return
      }

      clearInterval(intervalId.value)
      intervalId.value = null
    }

    const reset = () => {
      clearInterval(intervalId.value)
      intervalId.value = null
      timeLeft.value = 0
    }

    onMounted(() => {
      start()
    })

    onBeforeUnmount(() => {
      clearInterval(intervalId.value)
    })

    return {
      timeLeft,
      start,
      pause,
      reset
    }
  }
}
</script>

在这个组件中，我们定义了一个名为timeLeft的响应式变量，它存储了剩余时间。我们还定义了三个方法：start、pause和reset，分别用于启动、暂停和重置倒计时。

在组件的mounted钩子中，我们调用start方法来启动倒计时。在组件的beforeUnmount钩子中，我们调用clearInterval方法来停止倒计时。

使用组件

现在，我们已经创建好了倒计时组件，就可以在项目中使用它了。我们可以将组件注册到Vue实例中，然后在模板中使用它。

<template>
  <countdown :time-left="10" />
</template>

<script>
import Countdown from './components/countdown.vue'

export default {
  components: {
    Countdown
  },
  data() {
    return {
      timeLeft: 10
    }
  }
}
</script>