前端vue3 实现倒计时功能 组件

现在web端需要实现一个倒计时的组件 现在使用的是ant-design 组件 但是并没有关于倒计时的组件 现在手写一个 直接上代码

子组件

timer.vue

<template>
  <span class="countdown-cell" :class="{ 'text-danger': isExpired }">
    {{ displayText }}
  </span>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  endTime: {
    type: [Number, String, Date],
    required: true
  }
});

const emit = defineEmits(['expired']);

const now = ref(Date.now());
const isExpired = ref(false);

// 计算剩余时间（毫秒）
const remainingTime = computed(() => {
  const end = new Date(props.endTime).getTime();
  return end - now.value;
});

// 显示文本
const displayText = computed(() => {
  if (isExpired.value) return '已过期';
  
  const totalSeconds = Math.floor(remainingTime.value / 1000);
  if (totalSeconds <= 0) return '00:00:00';
  
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  
  return [
    hours.toString().padStart(2, '0'),
    minutes.toString().padStart(2, '0'),
    seconds.toString().padStart(2, '0')
  ].join(':');
});

// 更新当前时间
let timer = null;
const updateNow = () => {
  now.value = Date.now();
  if (remainingTime.value <= 0 && !isExpired.value) {
    isExpired.value = true;
    emit('expired');
  }
};

onMounted(() => {
  updateNow();
  timer = setInterval(updateNow, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.countdown-cell {
  font-family: monospace;
}
.text-danger {
  color: #f56c6c;
  font-weight: bold;
}
</style>

父组件中使用

   <CountdownTime
                  :end-time="getEndTime(record.createTime)"
                  @expired="handleExpired(record.id)"
    ></CountdownTime>

// 计算结束时间（创建时间 + 28分钟）
const getEndTime = (createTime: any) => {
  return new Date(Number(createTime) + 28 * 60 * 1000)
}

// 格式化日期
const formatDate = timestamp => {
  return new Date(timestamp).toLocaleString()
}

// 处理倒计时过期事件
const handleExpired = id => {
  console.log(`项目 ${id} 已过期`)
  // 可以在这里更新状态或执行其他操作
}

慢慢理解  直接用 就好了 传递 endTime 时间 比如 可以 使用创建时间 + 你想倒计时的时间

@expired 是倒计时结束的操作函数