DataCountdown 倒计时展示

使用 avue-data-countdown 展示倒计时展示，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

观察秒数每秒变化；点击“重新计时”恢复 90 秒。计时逻辑位于示例自身。

正在加载示例…

<template>
  <el-button type="primary" plain @click="restart">重新计时</el-button>
  <avue-data-countdown :option="option" />
</template>

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

const option = ref({
  span: 24,
  showDays: true,
  data: [{ title: '距离演示结束', days: 0, hours: 0, minutes: 1, seconds: 30, desc: '计时由示例外层维护' }]
});
let deadline = 0;
let timer;
const updateRemaining = () => {
  const seconds = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
  Object.assign(option.value.data[0], {
    days: Math.floor(seconds / 86400),
    hours: Math.floor(seconds / 3600) % 24,
    minutes: Math.floor(seconds / 60) % 60,
    seconds: seconds % 60,
    desc: seconds ? '计时由示例外层维护' : '演示计时已结束'
  });
};
const restart = () => {
  deadline = Date.now() + 90 * 1000;
  updateRemaining();
};
onMounted(() => {
  restart();
  timer = setInterval(updateRemaining, 1000);
});
onBeforeUnmount(() => clearInterval(timer));
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
gutter	number	20	栅格间距，单位 px；当前实现传 0 也会回退为 20
showDays	boolean	true	是否展示天数区块

data 数据项

字段	类型	默认值	说明
title / desc	string	—	标题和底部说明
days / hours / minutes / seconds	number	0	已经拆分的倒计时数值，小于 10 时补零
background	string	蓝紫渐变	卡片 CSS background

使用说明

组件只渲染天、时、分、秒，不接收 targetTime，也不内置计时器或 finish 事件。示例由外层定时计算剩余时间，并在卸载时清理 interval；真实业务应根据服务端截止时间计算。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

组件未定义业务事件；通过响应式更新 option.data 控制展示。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。