Press Next

# MatchCountDownNormal 倒计时组件

通用倒计时组件，支持年、月、天、时、分、秒的倒计时信息展示。支持主题定制，适用于各种需要倒计时展示的场景。

# 特性

  • ⏰ 智能倒计时 - 基于 PressCountDown 组件，自动更新倒计时
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • ⚡ 轻量高效 - 优化的代码结构，性能出色
  • 🎯 特色样式 - 带有切角效果的数字项设计

# 适用场景

  • 比赛开始倒计时
  • 活动开始前提示
  • 促销活动倒计时
  • 在线游戏等待

# 引入

import PressMatchCountDownNormal from 'press-next/press-match-count-down-normal/press-match-count-down-normal';

# 代码演示

# 基础用法

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

<script setup lang="ts">
import PressMatchCountDownNormal from 'press-next/press-match-count-down-normal/press-match-count-down-normal';

// 计算25天16小时18分后的倒计时
const countdownTime = 25 * 24 * 60 * 60 * 1000 + 16 * 60 * 60 * 1000 + 18 * 60 * 1000;

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

# 自定义标签

<template>
  <PressMatchCountDownNormal
    :time="countdownTime"
    day-label="D"
    hour-label="H"
    minute-label="M"
    @on-finish="handleFinish"
  />
</template>

<script setup lang="ts">
import PressMatchCountDownNormal from 'press-next/press-match-count-down-normal/press-match-count-down-normal';

const countdownTime = 25 * 24 * 60 * 60 * 1000 + 16 * 60 * 60 * 1000 + 18 * 60 * 1000;

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

# 仅显示部分单位

<template>
  <!-- 仅显示时分秒 -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-day="false"
    :show-second="true"
    hour-label="时"
    minute-label="分"
    second-label="秒"
  />
  
  <!-- 显示天时分秒（最多四列） -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-day="true"
    :show-hour="true"
    :show-minute="true"
    :show-second="true"
    day-label="天"
    hour-label="时"
    minute-label="分"
    second-label="秒"
  />
</template>

# 自定义分隔符

<template>
  <PressMatchCountDownNormal
    :time="countdownTime"
    separator="|"
    @on-finish="handleFinish"
  />
</template>

# 显示年月日

<template>
  <!-- 仅显示年月 -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-year="true"
    :show-month="true"
    :show-day="false"
    :show-hour="false"
    :show-minute="false"
    year-label="年"
    month-label="月"
  />
  
  <!-- 完整时间（年月日时分） -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-year="true"
    :show-month="true"
    :show-day="true"
    :show-hour="true"
    :show-minute="true"
    year-label="年"
    month-label="月"
    day-label="天"
    hour-label="时"
    minute-label="分"
  />
</template>

<script setup lang="ts">
import PressMatchCountDownNormal from 'press-next/press-match-count-down-normal/press-match-count-down-normal';

// 1年2个月10天5小时30分
const countdownTime = 1 * 365 * 24 * 60 * 60 * 1000 
  + 2 * 30 * 24 * 60 * 60 * 1000 
  + 10 * 24 * 60 * 60 * 1000 
  + 5 * 60 * 60 * 1000 
  + 30 * 60 * 1000;
</script>

# 自定义主题

<template>
  <PressMatchCountDownNormal
    custom-class="my-custom-countdown"
    :time="countdownTime"
  />
</template>

<style>
.my-custom-countdown {
  --pmcdn-item-bg: linear-gradient(88deg, #667eea 0%, #764ba2 100%);
  --pmcdn-number-color: #ffffff;
  --pmcdn-label-color: #ffffff;
  --pmcdn-separator-color: #667eea;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
time 倒计时剩余时间（毫秒） number 0
year-label 年单位标签 string '年'
month-label 月单位标签 string '月'
day-label 天数单位标签 string '天'
hour-label 小时单位标签 string '时'
minute-label 分钟单位标签 string '分'
second-label 秒单位标签 string '秒'
show-year 是否显示年 boolean false
show-month 是否显示月 boolean false
show-day 是否显示天数 boolean true
show-hour 是否显示小时 boolean true
show-minute 是否显示分钟 boolean true
show-second 是否显示秒 boolean false
separator 分隔符 string ':'

# Events

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

# 注意事项

# 使用建议

  1. 时间格式：time 接收毫秒级的剩余时间，不是时间戳
  2. 自动更新：组件基于 PressCountDown 实现，会自动更新倒计时
  3. 结束处理：倒计时结束时会触发 on-finish 事件
  4. 响应式适配：在小屏幕设备上，建议适当调整相关尺寸变量
  5. 年月计算：年月按平均值计算（1年=365天，1月=30天），适用于大致估算场景
  6. 最多四列：建议最多同时显示四个时间单位，保持界面美观（如：天/时/分/秒 或 年/月/日/时）

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 倒计时基于高性能的 PressCountDown 组件
  • 样式使用CSS变量，便于动态主题切换

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

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

# 样式变量

# 定位属性 (Positioning)

名称 默认值 描述
--pmcdn-item-position relative 数字项定位方式

# 盒模型属性 (Box Model)

名称 默认值 描述
--pmcdn-container-display flex 容器显示方式
--pmcdn-container-align-items center 容器垂直对齐方式
--pmcdn-container-justify-content center 容器水平对齐方式
--pmcdn-item-overflow hidden 数字项溢出处理
--pmcdn-item-width 1.2rem 数字项宽度
--pmcdn-item-height 1.36rem 数字项高度
--pmcdn-number-box-sizing border-box 数字盒模型
--pmcdn-number-height .96rem 数字高度
--pmcdn-number-padding .06rem 0 0 0 数字内边距
--pmcdn-label-box-sizing border-box 标签盒模型
--pmcdn-label-height .4rem 标签高度
--pmcdn-label-padding 0 0 .06rem 0 标签内边距
--pmcdn-divider-width 100% 分隔线宽度
--pmcdn-divider-height .02rem 分隔线高度
--pmcdn-divider-margin 0 分隔线边距
--pmcdn-separator-width .72rem 分隔符宽度

# 边框属性 (Border)

名称 默认值 描述
--pmcdn-item-border-radius 0 数字项圆角

# 背景属性 (Background)

名称 默认值 描述
--pmcdn-item-bg linear-gradient(88deg, #212124 -20.06%, #2d2b30 91.13%) 数字项背景渐变
--pmcdn-divider-bg rgba(51, 52, 56, .8) 分隔线背景色

# 文本属性 (Typography)

名称 默认值 描述
--pmcdn-number-color $color-text-invert-light 数字颜色
--pmcdn-number-font-family 'DIN Black', 'PingFang SC', sans-serif 数字字体族
--pmcdn-number-font-size $font-size-xxl 数字字体大小
--pmcdn-number-font-weight 900 数字字体粗细
--pmcdn-number-line-height 1.5 数字行高
--pmcdn-number-text-align center 数字文本对齐
--pmcdn-label-color $color-text-invert-default 标签颜色
--pmcdn-label-font-size $font-size-xs 标签字体大小
--pmcdn-label-font-weight $font-weight-regular 标签字体粗细
--pmcdn-label-line-height 1.5 标签行高
--pmcdn-label-text-align center 标签文本对齐
--pmcdn-separator-color #212124 分隔符颜色
--pmcdn-separator-font-family 'AgencyFB', sans-serif 分隔符字体族
--pmcdn-separator-font-size .72rem 分隔符字体大小
--pmcdn-separator-font-weight $font-weight-bold 分隔符字体粗细

# 其他属性 (Others)

名称 默认值 描述
--pmcdn-item-clip-path polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%) 数字项裁剪路径（切角效果）

← MatchCreateGame →