Press Next

# MatchCountDownMini 迷你倒计时组件

轻量级迷你倒计时组件，自动根据时间长度智能展示月、天、时模式，适用于赛事开赛倒计时、活动倒计时等场景。

# 特性

  • 智能模式切换：自动根据时间长度展示最合适的单位
    • 月模式（≥30天）：显示 月 天:时
    • 天模式（1-29天）：显示 天 时:分
    • 时模式（<1天）：显示 时 分:秒
  • 固定三列布局：第一列显示单位，后两列用冒号分隔
  • 精确计算：基于 PressCountDown 组件，保证倒计时精度

# 引入

import PressMatchCountDownMini from 'press-next/press-match-count-down-mini/press-match-count-down-mini';

# 代码演示

# 基础用法（自动模式）

组件会自动根据倒计时长度选择合适的显示模式。

<template>
  <PressMatchCountDownMini
    :time="countdownTime"
    @on-finish="handleFinish"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchCountDownMini from 'press-next/press-match-count-down-mini/press-match-count-down-mini';

// 2个月15天10小时 - 自动显示月模式
const countdownTime = ref(2 * 30 * 24 * 60 * 60 * 1000 + 15 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000);

const handleFinish = () => {
  console.log('倒计时结束');
};
</script>

# 月模式展示

当倒计时 ≥ 30天时，自动显示为月模式：月 天:时

<template>
  <!-- 显示：2月 15天:10时 -->
  <PressMatchCountDownMini
    :time="monthTime"
  />
</template>

<script setup lang="ts">
// 2个月15天10小时
const monthTime = ref(2 * 30 * 24 * 60 * 60 * 1000 + 15 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000);
</script>

# 天模式展示

当倒计时在 1-29天时，自动显示为天模式：天 时:分

<template>
  <!-- 显示：25天 10时:30分 -->
  <PressMatchCountDownMini
    :time="dayTime"
  />
</template>

<script setup lang="ts">
// 25天10小时30分
const dayTime = ref(25 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000 + 30 * 60 * 1000);
</script>

# 时模式展示

当倒计时 < 1天时，自动显示为时模式：时 分:秒

<template>
  <!-- 显示：10时 30分:45秒 -->
  <PressMatchCountDownMini
    :time="hourTime"
  />
</template>

<script setup lang="ts">
// 10小时30分45秒
const hourTime = ref(10 * 60 * 60 * 1000 + 30 * 60 * 1000 + 45 * 1000);
</script>

# 自定义单位标签

可以自定义各个时间单位的标签文字。

<template>
  <PressMatchCountDownMini
    :time="countdownTime"
    month-label="个月"
    day-label="日"
    hour-label="小时"
    minute-label="分钟"
    second-label="秒钟"
  />
</template>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
time 倒计时剩余时间（毫秒） number 0
month-label 月单位标签 string '月'
day-label 天单位标签 string '天'
hour-label 小时单位标签 string '时'
minute-label 分钟单位标签 string '分'
second-label 秒单位标签 string '秒'
separator 分隔符（用于后两列之间） string ':'

# Events

事件名 说明 回调参数
on-finish 倒计时结束时触发 -

# 显示逻辑说明

组件采用固定三列布局，根据倒计时长度自动切换显示内容：

倒计时长度 模式 第一列 第二列 第三列 示例
≥ 30天 月模式 月（带单位） 天 时 2月 15:10
1-29天 天模式 天（带单位） 时 分 25天 10:30
< 1天 时模式 时（带单位） 分 秒 10时 30:45

说明：

  • 第一列始终显示单位文字（如"月"、"天"、"时"）
  • 第二列和第三列之间使用冒号分隔符
  • 1个月按30天计算

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

名称 默认值 描述
--pcdm-container-display flex 容器显示方式
--pcdm-container-align-items center 容器对齐方式
--pcdm-item-min-width .4rem 时间项最小宽度
--pcdm-item-height .4rem 时间项高度
--pcdm-item-margin 0 .08rem 时间项外边距
--pcdm-item-padding 0 .05rem 时间项内边距
--pcdm-item-border-radius .04rem 时间项圆角
--pcdm-item-bg $color-surface-dark 时间项背景色
--pcdm-value-color $color-text-invert-light 时间数值颜色
--pcdm-value-font-size $font-size-sm 时间数值字体大小
--pcdm-value-font-weight $font-weight-bold 时间数值字重
--pcdm-value-font-family 'PingFang SC' 时间数值字体
--pcdm-unit-color $color-text-secondary 单位颜色
--pcdm-unit-font-size $font-size-sm 单位字体大小
--pcdm-unit-font-weight $font-weight-regular 单位字重
--pcdm-separator-color $color-text-secondary 分隔符颜色
--pcdm-separator-font-size $font-size-sm 分隔符字体大小
--pcdm-separator-font-weight $font-weight-regular 分隔符字重
--pcdm-item-opacity .8 时间项透明度

# 使用场景

  • 长期赛事倒计时：自动适配月/天/时显示
  • 活动倒计时：根据活动时长智能展示
  • 订单倒计时：支付时限提醒
  • 限时优惠：促销活动倒计时

# 注意事项

  1. time 参数接收的是毫秒数，请确保传入正确的时间单位
  2. 组件会自动根据倒计时长度切换显示模式，无需手动控制
  3. 月份计算按30天为一个月
  4. 组件基于 PressCountDown 组件封装，继承其倒计时计算逻辑
  5. 支持通过 CSS 变量进行主题定制，可灵活适配不同设计风格

← MatchCountDownNormal →