在Vue.js中实现倒计时计时器

<template>
  <div>
    <span v-if="sla.expired" style="color: red;">{{ `SLA已过期` }}</span>
    <span v-else style="color: rgb(80, 180, 80)">{{ `${displayTime}` }}</span>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    sla: Object,
    created_at: String,
  },
  data() {
    return {
      intervalId: null,
      displayTime: '',
    };
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    startCountdown() {
      const initialDate = moment(this.created_at).add(this.sla.time, 'hours');

      this.intervalId = setInterval(() => {
        const countdownDuration = initialDate.diff(moment());
        let secondsRemaining = moment.duration(countdownDuration).asSeconds();

        const hours = Math.floor(secondsRemaining / 3600);
        const minutes = Math.floor((secondsRemaining % 3600) / 60);
        const seconds = Math.floor(secondsRemaining % 60);

        this.displayTime = `${hours > 0 ? hours + '小时 ' : ''}${minutes}分钟 ${seconds}秒`;

        if (secondsRemaining <= 0) {
          clearInterval(this.intervalId);
          this.$set(this.sla, 'expired', true);
        }

        secondsRemaining--;
      }, 1000);
    },
  },
};
</script>

<style scoped>
</style>

<template>
  <ul>
    <li v-for="(sla, j) in liquidasset.slas" :key="sla.id">
      <CountdownTimer :sla="sla" :created_at="liquidasset.created_at" />
    </li>
  </ul>
</template>

<script>
import CountdownTimer from '@/components/CountdownTimer.vue'; // 根据你的项目结构更新路径

export default {
  components: {
    CountdownTimer,
  },
  data() {
    return {
      liquidasset: {
        created_at: '2024-01-27T12:00:00', // 示例日期
        slas: [...], // 你的SLAs数组
      },
    };
  },
};
</script>