XTimeDiff — 时间差
传入目标时间，自动计算与当前时间的差值并每秒更新。过去时间显示「已过 X年X月X日」，未来时间显示「剩余 X年X月X日」。
实时演示
已过2年2月25日，07时26分46秒
剩余3月28日，08时03分14秒
剩余9月11日，17时03分14秒
vue
<XTimeDiff time="2024-06-01 08:30:00" />
<XTimeDiff time="2026-12-25 00:00:00" variant="card" />
<XTimeDiff time="2027-06-07 09:00:00" variant="pill" color="#409eff" size="lg" />Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
time | string | —（必填） | 目标时间，格式 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss |
prefix | string | '已过' / '剩余' | 自定义前缀文字，覆盖默认判断 |
suffix | string | '' | 自定义后缀文字 |
variant | string | 'segment' | 视觉风格：segment/plain/outline/card/pill |
size | string | 'md' | 尺寸档位：sm/md/lg |
color | string | '' | 强调色；不传使用中性墨色，不依赖品牌主题色 |
fontSize | string | '' | 字体大小，如 '24px'、'1.2em'（精确覆盖 size） |
风格对照
| variant | 视觉特征 | 适用场景 |
|---|---|---|
segment | 每个「数字+单位」包成软胶囊 | 通用展示（默认） |
plain | 无装饰内联文本 | 正文内嵌、节省空间 |
outline | 描边分段，通透轻盈 | 浅色背景、低调呈现 |
card | 整体卡片容器，自带阴影 | 作为独立信息块强调 |
pill | 实心高强调，自动对比文字 | 重点倒计时、C 位展示 |
注意事项
time仅支持YYYY-MM-DD或YYYY-MM-DD HH:mm:ss，不含时分秒时隐藏「XX时XX分XX秒」。- 通过
setInterval每秒更新，性能开销极低。 - 倒计时到达目标时间后自动切换为「已过」模式。