Press Next

# MatchCountDownMini

# Introduction

A lightweight mini countdown component that automatically displays month, day, or hour mode based on the remaining time, suitable for match countdown, event countdown and other scenarios.

# Features

  • Smart Mode Switching: Automatically displays the most appropriate unit based on time length
    • Month mode (≥30 days): Display Month Day:Hour
    • Day mode (1-29 days): Display Day Hour:Minute
    • Hour mode (<1 day): Display Hour Minute:Second
  • Fixed Three-Column Layout: First column shows unit label, last two columns separated by colon
  • Accurate Calculation: Based on PressCountDown component for precise countdown

# Import

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

# Code Demo

# Basic Usage (Auto Mode)

The component automatically selects the appropriate display mode based on countdown length.

<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 months 15 days 10 hours - Auto display month mode
const countdownTime = ref(2 * 30 * 24 * 60 * 60 * 1000 + 15 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000);

const handleFinish = () => {
  console.log('Countdown finished');
};
</script>

# Month Mode Display

When countdown ≥ 30 days, automatically displays month mode: Month Day:Hour

<template>
  <!-- Display: 2 months 15:10 -->
  <PressMatchCountDownMini
    :time="monthTime"
  />
</template>

<script setup lang="ts">
// 2 months 15 days 10 hours
const monthTime = ref(2 * 30 * 24 * 60 * 60 * 1000 + 15 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000);
</script>

# Day Mode Display

When countdown is 1-29 days, automatically displays day mode: Day Hour:Minute

<template>
  <!-- Display: 25 days 10:30 -->
  <PressMatchCountDownMini
    :time="dayTime"
  />
</template>

<script setup lang="ts">
// 25 days 10 hours 30 minutes
const dayTime = ref(25 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000 + 30 * 60 * 1000);
</script>

# Hour Mode Display

When countdown < 1 day, automatically displays hour mode: Hour Minute:Second

<template>
  <!-- Display: 10 hours 30:45 -->
  <PressMatchCountDownMini
    :time="hourTime"
  />
</template>

<script setup lang="ts">
// 10 hours 30 minutes 45 seconds
const hourTime = ref(10 * 60 * 60 * 1000 + 30 * 60 * 1000 + 45 * 1000);
</script>

# Custom Labels

Customize time unit labels.

<template>
  <PressMatchCountDownMini
    :time="countdownTime"
    month-label="M"
    day-label="D"
    hour-label="H"
    minute-label="Min"
    second-label="Sec"
  />
</template>

# API

# Props

Prop Description Type Default
custom-class Custom class name string ''
time Countdown remaining time (milliseconds) number 0
month-label Month unit label string '月'
day-label Day unit label string '天'
hour-label Hour unit label string '时'
minute-label Minute unit label string '分'
second-label Second unit label string '秒'
separator Separator (between last two columns) string ':'

# Events

Event Description Arguments
on-finish Triggered when countdown ends -

# Display Logic

The component uses a fixed three-column layout, automatically switching content based on countdown length:

Countdown Length Mode Column 1 Column 2 Column 3 Example
≥ 30 days Month Month (with label) Day Hour 2M 15:10
1-29 days Day Day (with label) Hour Minute 25D 10:30
< 1 day Hour Hour (with label) Minute Second 10H 30:45

Note:

  • Column 1 always displays unit text (e.g., "M", "D", "H")
  • Columns 2 and 3 are separated by a colon
  • 1 month is calculated as 30 days

# Theme Customization

The component provides the following CSS variables for custom styles. For usage, please refer to the ConfigProvider component.

# Style Variables

Name Default Description
--pcdm-container-display flex Container display mode
--pcdm-container-align-items center Container alignment
--pcdm-item-min-width .4rem Time item min width
--pcdm-item-height .4rem Time item height
--pcdm-item-margin 0 .08rem Time item margin
--pcdm-item-padding 0 .05rem Time item padding
--pcdm-item-border-radius .04rem Time item border radius
--pcdm-item-bg $color-surface-dark Time item background
--pcdm-value-color $color-text-invert-light Time value color
--pcdm-value-font-size $font-size-sm Time value font size
--pcdm-value-font-weight $font-weight-bold Time value font weight
--pcdm-value-font-family 'PingFang SC' Time value font family
--pcdm-unit-color $color-text-secondary Unit color
--pcdm-unit-font-size $font-size-sm Unit font size
--pcdm-unit-font-weight $font-weight-regular Unit font weight
--pcdm-separator-color $color-text-secondary Separator color
--pcdm-separator-font-size $font-size-sm Separator font size
--pcdm-separator-font-weight $font-weight-regular Separator font weight
--pcdm-item-opacity .8 Time item opacity

# Use Cases

  • Long-term Match Countdown: Auto-adapts to month/day/hour display
  • Event Countdown: Smart display based on event duration
  • Order Countdown: Payment time limit reminder
  • Limited Offer: Promotional countdown

# Notes

  1. The time parameter receives milliseconds, please ensure the correct time unit
  2. The component automatically switches display mode based on countdown length, no manual control needed
  3. Month calculation is based on 30 days per month
  4. The component is based on PressCountDown and inherits its countdown calculation logic
  5. Supports theme customization through CSS variables for flexible design adaptation

← MatchCountDownNormal →