vue毫秒倒计时

<template>
  <div>
    剩余时间: {{ formattedTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      endTime: Date.now() + 60000, // 设置结束时间为当前时间后60秒
      timer: null
    };
  },
  computed: {
    formattedTime() {
      const diff = this.endTime - Date.now();
      if (diff <= 0) return '00:00:00.000';
      const ms = diff % 1000;
      const sec = Math.floor(diff / 1000) % 60;
      const min = Math.floor(diff / (1000 * 60)) % 60;
      const hours = Math.floor(diff / (1000 * 60 * 60));
      return `${this.pad(hours)}:${this.pad(min)}:${this.pad(sec)}.${this.pad(ms, 3)}`;
    }
  },
  methods: {
    pad(num, size = 2) {
      let s = num + "";
      while (s.length < size) s = "0" + s;
      return s;
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.endTime <= Date.now()) {
        clearInterval(this.timer);
        this.endTime = 0;
      }
    }, 10); // 每10毫秒更新一次
  },
  beforeUnmount() {
    clearInterval(this.timer); // 清除定时器以避免内存泄漏
  }
};
</script>