当前位置：首页 > VUE

vue实现秒表组件

2026-01-16 03:58:28VUE

vue实现秒表组件

实现秒表组件的基本思路

使用Vue实现秒表组件需要管理时间状态、控制计时器的启动/暂停/重置功能，并通过计算属性动态显示格式化时间。核心逻辑包括利用setInterval更新计时数据，并通过生命周期钩子清除计时器避免内存泄漏。

定义组件模板结构

<template>
  <div class="stopwatch">
    <div class="display">{{ formattedTime }}</div>
    <div class="controls">
      <button @click="start" :disabled="isRunning">Start</button>
      <button @click="pause" :disabled="!isRunning">Pause</button>
      <button @click="reset">Reset</button>
    </div>
  </div>
</template>

脚本部分实现

<script>
export default {
  data() {
    return {
      isRunning: false,
      elapsedTime: 0,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const date = new Date(this.elapsedTime);
      const minutes = date.getUTCMinutes().toString().padStart(2, '0');
      const seconds = date.getUTCSeconds().toString().padStart(2, '0');
      const milliseconds = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0');
      return `${minutes}:${seconds}.${milliseconds}`;
    }
  },
  methods: {
    start() {
      if (!this.isRunning) {
        const startTime = Date.now() - this.elapsedTime;
        this.timer = setInterval(() => {
          this.elapsedTime = Date.now() - startTime;
        }, 10);
        this.isRunning = true;
      }
    },
    pause() {
      clearInterval(this.timer);
      this.isRunning = false;
    },
    reset() {
      clearInterval(this.timer);
      this.isRunning = false;
      this.elapsedTime = 0;
    }
  },
  beforeUnmount() {
    clearInterval(this.timer);
  }
}
</script>

样式优化建议

<style scoped>
.stopwatch {
  text-align: center;
  font-family: sans-serif;
}
.display {
  font-size: 3em;
  margin-bottom: 20px;
}
button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>