<template>
  <div>
    <div>{{ countdown }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deadline: Date.now() + (60 * 1000), // 默认截止时间为当前时间后的1分钟
    };
  },
  computed: {
    countdown() {
      const now = Date.now();
      const remainingTime = this.deadline - now;

      if (remainingTime <= 0) {
        // 触发倒计时结束事件
        this.emit('countdown-end');
      }

      // 将剩余时间格式化为hh:mm:ss的形式
      const hours = Math.floor((remainingTime / (1000 * 60 * 60))).toString().padStart(2, '0');
      const minutes = Math.floor((remainingTime / (1000 * 60)) % 60).toString().padStart(2, '0');
      const seconds = Math.floor((remainingTime / 1000) % 60).toString().padStart(2, '0');

      return `{hours}:{minutes}:{seconds}`;
    },
  },
};
</script>

<template>
  <div>
    <countdown @countdown-end="handleCountdownEnd"></countdown>
  </div>
</template>

<script>
import Countdown from './Countdown.vue';

export default {
  components: {
    Countdown,
  },
  methods: {
    handleCountdownEnd() {
      console.log('倒计时结束');
    },
  },
};
</script>

  mounted() {
    const deadline = Date.now() + (30 * 1000);
    this.$refs.countdown.deadline = deadline;
  },