基于 Vue 3 的计时器应用：实现时间倒计时功能

在本篇文章中，我们将一起实现一个简单的计时器应用。这个应用允许用户设置一个倒计时的时间，并在时间结束时发出提醒。我们将使用 Vue 3 的 setup 语法糖构建这个应用，确保代码简洁且易于维护。

项目结构

我们的倒计时应用将包含以下结构：

/timer-app
├── /src
│   ├── App.vue
│   └── main.js
└── index.html

1. 设置基础项目

首先，确保你已经安装了 Vue CLI。如果没有，可以通过命令行使用以下命令安装：

npm install -g @vue/cli

接下来，创建一个新的 Vue 项目：

vue create timer-app

选择默认配置，完成后进入项目目录：

cd timer-app

我们将在 src 目录下编辑 App.vue 文件，以实现我们的计时器功能。

2. 编写计时器组件

打开 src/App.vue 文件，并替换其中的内容如下：

<template>
  <div id="app">
    <h1>简单倒计时器</h1>
    <input
      type="number"
      v-model="inputTime"
      placeholder="设置倒计时（秒）"
      min="1"
    />
    <button @click="startTimer" :disabled="isRunning">开始倒计时</button>
    <p v-if="isRunning">{{ remainingTime }}秒</p>
    <p v-if="message" :class="{ 'text-danger': !isRunning }">{{ message }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const inputTime = ref(0); // 用户输入的倒计时秒数
    const remainingTime = ref(0); // 剩余倒计时秒数
    const isRunning = ref(false); // 计时器是否在运行
    const message = ref(''); // 显示的消息

    let timer;

    const startTimer = () => {
      if (inputTime.value <= 0) {
        message.value = '请输入正确的时间';
        return;
      }
      remainingTime.value = inputTime.value;
      message.value = '';
      isRunning.value = true;

      timer = setInterval(() => {
        if (remainingTime.value > 0) {
          remainingTime.value--;
        } else {
          clearInterval(timer);
          isRunning.value = false;
          message.value = '时间到！';
        }
      }, 1000);
    };

    watch(inputTime, () => {
      if (isRunning.value) {
        clearInterval(timer);
        isRunning.value = false;
        message.value = '请重新开始倒计时';
      }
    });

    return {
      inputTime,
      remainingTime,
      isRunning,
      message,
      startTimer,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
input {
  padding: 10px;
  font-size: 16px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}
.text-danger {
  color: red;
  font-weight: bold;
}
</style>

3. 代码解析

在上述代码中，我们使用了 Vue 3 的 setup 函数和 ref 函数来创建响应式的数据。以下是关键部分的解释：

• 输入处理：用户通过 inputTime 输入秒数，并且这个值始终保持为响应式。当用户点击“开始倒计时”按钮时，startTimer 方法将被调用。

• 开始计时：在 startTimer 方法中，我们首先检查输入的有效性（确保大于 0），然后将其赋值给 remainingTime。接着使用 setInterval 方法每秒更新剩余时间。

• 结束计时：当 remainingTime 降至 0 时，清除定时器，并更新状态为不在运行，同时显示“时间到！”的消息。

• 监控输入变化：使用 watch 监听 inputTime 变化，如果用户在计时器运行时改变输入内容，计时器会停止，并提醒用户重新开始。

4. 运行应用

完成上述代码后，我们可以开始运行应用。在项目根目录下，使用以下命令启动本地开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，你将看到我们的计时器应用界面。

5. 后续扩展

这个简单的计时器应用只是一个开端，您可以进一步扩展：

• 增加暂停和重置功能：允许用户暂停计时并在需要时重置。
• 声音提醒：时间结束时播放声音。
• 美化界面：使用 CSS 或 UI 框架（如 Vuetify 或 Element Plus）来美化界面。

6. 总结

在这个博客中，我们实现了一个简单但实用的倒计时器应用，利用 Vue 3 的 setup 语法糖和响应式特性，使得代码结构清晰且易于扩展。希望这个示例能够帮助你更好地理解 Vue 3 的基本用法，并为你的项目提供灵感。