当前位置：首页 > VUE

vue实现番茄钟

2026-02-19 16:02:20VUE

Vue实现番茄钟的步骤

创建Vue项目

使用Vue CLI创建一个新项目，确保已安装Node.js和Vue CLI。运行以下命令初始化项目：

vue create pomodoro-timer
cd pomodoro-timer

设计组件结构

在src/components目录下创建PomodoroTimer.vue文件，作为番茄钟的核心组件。组件包含以下部分：

计时器显示区域
开始/暂停按钮
重置按钮
设置工作时间与休息时间

实现计时器逻辑

在PomodoroTimer.vue中，使用data定义计时器状态：

vue实现番茄钟

data() {
  return {
    minutes: 25,
    seconds: 0,
    isWorking: true,
    isRunning: false,
    timer: null,
    workDuration: 25,
    breakDuration: 5
  }
}

添加方法控制计时器

实现开始、暂停和重置功能：

methods: {
  startTimer() {
    if (!this.isRunning) {
      this.isRunning = true;
      this.timer = setInterval(() => {
        if (this.seconds === 0) {
          if (this.minutes === 0) {
            this.switchMode();
          } else {
            this.minutes--;
            this.seconds = 59;
          }
        } else {
          this.seconds--;
        }
      }, 1000);
    }
  },
  pauseTimer() {
    clearInterval(this.timer);
    this.isRunning = false;
  },
  resetTimer() {
    clearInterval(this.timer);
    this.isRunning = false;
    this.minutes = this.isWorking ? this.workDuration : this.breakDuration;
    this.seconds = 0;
  },
  switchMode() {
    this.isWorking = !this.isWorking;
    this.minutes = this.isWorking ? this.workDuration : this.breakDuration;
    this.seconds = 0;
  }
}

添加模板与样式

在template部分添加计时器界面：

vue实现番茄钟

<template>
  <div class="pomodoro-timer">
    <h3>{{ isWorking ? '工作时间' : '休息时间' }}</h3>
    <div class="timer-display">
      {{ String(minutes).padStart(2, '0') }}:{{ String(seconds).padStart(2, '0') }}
    </div>
    <div class="controls">
      <button @click="startTimer" :disabled="isRunning">开始</button>
      <button @click="pauseTimer" :disabled="!isRunning">暂停</button>
      <button @click="resetTimer">重置</button>
    </div>
    <div class="settings">
      <label>
        工作时间(分钟):
        <input type="number" v-model.number="workDuration" min="1">
      </label>
      <label>
        休息时间(分钟):
        <input type="number" v-model.number="breakDuration" min="1">
      </label>
    </div>
  </div>
</template>

添加样式

在style部分添加基本样式：

<style scoped>
.pomodoro-timer {
  text-align: center;
  margin-top: 20px;
}
.timer-display {
  font-size: 3em;
  margin: 20px 0;
}
.controls button {
  margin: 0 10px;
  padding: 8px 16px;
  font-size: 1em;
}
.settings {
  margin-top: 20px;
}
.settings label {
  display: block;
  margin-bottom: 10px;
}
</style>

在主应用中使用组件

在App.vue中导入并使用PomodoroTimer组件：

<template>
  <div id="app">
    <PomodoroTimer />
  </div>
</template>

<script>
import PomodoroTimer from './components/PomodoroTimer.vue'

export default {
  name: 'App',
  components: {
    PomodoroTimer
  }
}
</script>