vue 实现 tomato timer(蕃茄钟)实例讲解

下面是详细讲解 “vue 实现 tomato timer(蕃茄钟)实例讲解”的完整攻略。

一、项目介绍

蕃茄钟是一种时间管理方法，采用对数目进行计数的方式来提高工作效率。本项目中我们将使用 Vue 来实现一个基础版的蕃茄钟。

二、项目结构

├── App.vue
├── main.js
├── components
│   ├── Timer.vue
│   └── Tomato.vue
├── assets
│   └── tomato.png
└── styles
    └── index.css

• App.vue: 根组件，用来包容计时器组件和蕃茄时钟组件
• components/Timer.vue: 计时器组件，显示倒计时和计时状态特效
• components/Tomato.vue: 蕃茄钟组件，用来设置每个蕃茄的时间和完成数量
• assets/tomato.png: 蕃茄钟图标
• styles/index.css: 样式文件

三、项目实现

1、Tomato.vue 组件

蕃茄钟组件中主要包含一个表单用来输入每个蕃茄的时间，还有一个用来显示当前完成的蕃茄数量。

<template>
  <div class="tomato">
    <div class="tomato-header">
      <img src="../../assets/tomato.png" alt="Tomato" width="80" height="80">
      <h2 class="tomato-title">Tomato Timer</h2>
    </div>
    <div class="tomato-body">
      <form class="tomato-form" @submit.prevent="submit">
        <label class="tomato-label" for="time">设置每个蕃茄时间(分钟)</label>
        <input class="tomato-input" type="number" id="time" v-model.number="time" min="1" max="60" required>
        <button class="tomato-button" type="submit">开始</button>
      </form>
      <div class="tomato-count">已完成 {{ count }} 个番茄</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 25,
      count: 0
    }
  },
  methods: {
    submit() {
      if (this.time <= 0) {
        return;
      }
      this.$emit('start', this.time)
    }
  }
}
</script>

<style scoped>
.tomato {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tomato-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0;
}
.tomato-title {
  font-size: 32px;
  margin-top: 16px;
}
.tomato-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tomato-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tomato-label {
  font-size: 16px;
  margin-bottom: 16px;
}
.tomato-input {
  width: 200px;
  height: 40px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #ccc;
  margin-bottom: 16px;
}
.tomato-button {
  width: 120px;
  height: 44px;
  font-size: 18px;
  color: #fff;
  background-color: #ff5a5f;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .3s;
}
.tomato-button:hover {
  background-color: #ff4148;
}
.tomato-count {
  margin-top: 32px;
}
</style>

2、Timer.vue 组件

计时器组件中主要是倒计时的计算和特效的显示。

<template>
  <div class="timer">
    <div class="timer-body" :class="{ 'timer-running': isRunning }">
      <div class="timer-number">{{ minutes }}</div>
      <div class="timer-colon">:</div>
      <div class="timer-number">{{ seconds }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      remainingSeconds: 0,
      interval: null
    }
  },
  computed: {
    minutes() {
      return Math.floor(this.remainingSeconds / 60);
    },
    seconds() {
      const seconds = this.remainingSeconds % 60;
      return seconds < 10 ? `0${seconds}` : seconds;
    },
    isRunning() {
      return this.interval !== null
    }
  },
  created() {
    this.reset();
  },
  methods: {
    start() {
      this.interval = setInterval(() => {
        this.remainingSeconds--;
        if (this.remainingSeconds <= 0) {
          this.reset();
          this.$emit('complete');
          return;
        }
      }, 1000)
    },
    reset() {
      clearInterval(this.interval);
      this.remainingSeconds = this.time * 60;
      this.interval = null;
    }
  }
}
</script>

<style scoped>
.timer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.timer-body {
  height: 120px;
  width: 220px;
  background-color: #ff5a5f;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timer-running .timer-body {
  animation: timer 1s linear infinite;
}
.timer-number {
  font-size: 72px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}
.timer-colon {
  font-size: 72px;
  margin-left: 8px;
  margin-right: 8px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}
@keyframes timer {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

3、App.vue

在根组件中我们需要将蕃茄钟组件和计时器组件进行拼接。

<template>
  <div>
    <Tomato @start="startTimer" :count="toCompleteCount"></Tomato>
    <Timer v-if="isRunning" :time="currentTime" @complete="completeTomato"></Timer>
  </div>
</template>

<script>
import Tomato from './components/Tomato.vue'
import Timer from './components/Timer.vue'

export default {
  components: {
    Tomato,
    Timer
  },
  data() {
    return {
      currentTime: 0,
      completedCount: 0
    }
  },
  computed: {
    toCompleteCount() {
      return this.completedCount + 1;
    },
    isRunning() {
      return this.currentTime !== 0
    }
  },
  methods: {
    startTimer(time) {
      this.currentTime = time;
    },
    completeTomato() {
      this.completedCount++;
      this.currentTime = 0;
    }
  }
}
</script>

<style>
/* 样式省略 */
</style>

四、项目演示

下面提供两个示例：

• 第一个示例是通过 Codepen 来演示的。代码地址

• 第二个示例是部署在 GitHub Pages 上的完整项目演示。项目地址，代码地址

至此，vue 实现 tomato timer(蕃茄钟)实例讲解完毕。