Press Next

# MatchCountDownNormal

A general countdown component that supports year, month, day, hour, minute, and second display. Supports theme customization and is suitable for various countdown display scenarios.

# Features

  • ⏰ Smart Countdown - Based on PressCountDown component, auto-updates countdown
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapts to different screen sizes
  • ⚡ Lightweight - Optimized code structure with excellent performance
  • 🎯 Unique Style - Number items with chamfered corner effects

# Use Cases

  • Match start countdown
  • Event pre-start reminder
  • Promotion countdown
  • Online game waiting

# Import

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

# Usage

# Basic Usage

<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';

// Calculate countdown for 25 days 16 hours 18 minutes
const countdownTime = 25 * 24 * 60 * 60 * 1000 + 16 * 60 * 60 * 1000 + 18 * 60 * 1000;

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

# Custom Labels

<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('Countdown finished');
};
</script>

# Show Partial Units

<template>
  <!-- Show only hours, minutes, seconds -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-day="false"
    :show-second="true"
    hour-label="H"
    minute-label="M"
    second-label="S"
  />
  
  <!-- Show days, hours, minutes, seconds (max 4 columns) -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-day="true"
    :show-hour="true"
    :show-minute="true"
    :show-second="true"
    day-label="D"
    hour-label="H"
    minute-label="M"
    second-label="S"
  />
</template>

# Custom Separator

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

# Show Year, Month, Day

<template>
  <!-- Show only year and month -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-year="true"
    :show-month="true"
    :show-day="false"
    :show-hour="false"
    :show-minute="false"
    year-label="Y"
    month-label="M"
  />
  
  <!-- Full time (year/month/day/hour/minute) -->
  <PressMatchCountDownNormal
    :time="countdownTime"
    :show-year="true"
    :show-month="true"
    :show-day="true"
    :show-hour="true"
    :show-minute="true"
    year-label="Years"
    month-label="Months"
    day-label="Days"
    hour-label="Hours"
    minute-label="Minutes"
  />
</template>

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

// 1 year, 2 months, 10 days, 5 hours, 30 minutes
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>

# Custom Theme

<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

Property Description Type Default
custom-class Custom class name string ''
time Remaining countdown time (milliseconds) number 0
year-label Label for year unit string '年'
month-label Label for month unit string '月'
day-label Label for day unit string '天'
hour-label Label for hour unit string '时'
minute-label Label for minute unit string '分'
second-label Label for second unit string '秒'
show-year Whether to show years boolean false
show-month Whether to show months boolean false
show-day Whether to show days boolean true
show-hour Whether to show hours boolean true
show-minute Whether to show minutes boolean true
show-second Whether to show seconds boolean false
separator Separator between units string ':'

# Events

Event Description Parameters
on-finish Triggered when countdown finishes -

# Notes

# Usage Tips

  1. Time Format: time accepts remaining time in milliseconds, not a timestamp
  2. Auto Update: Component is based on PressCountDown, auto-updates countdown
  3. Finish Handling: Triggers on-finish event when countdown ends
  4. Responsive: Adjust size variables for smaller screens
  5. Year/Month Calculation: Years and months are calculated using averages (1 year = 365 days, 1 month = 30 days), suitable for rough estimates
  6. Max Four Columns: Recommend displaying maximum four time units simultaneously for better UI (e.g., D/H/M/S or Y/M/D/H)

# Performance

  • Uses virtual host to reduce DOM levels
  • Based on high-performance PressCountDown component
  • CSS variables for easy dynamic theme switching

# Compatibility

  • Vue 3.0+
  • Modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • WeChat Mini Program, Alipay Mini Program, etc.

# Theme Customization

The component provides the following CSS variables for custom styling. Refer to ConfigProvider for usage.

# CSS Variables

# Positioning

Name Default Description
--pmcdn-item-position relative Number item position

# Box Model

Name Default Description
--pmcdn-container-display flex Container display mode
--pmcdn-container-align-items center Container vertical alignment
--pmcdn-container-justify-content center Container horizontal alignment
--pmcdn-item-overflow hidden Number item overflow
--pmcdn-item-width 1.2rem Number item width
--pmcdn-item-height 1.36rem Number item height
--pmcdn-number-box-sizing border-box Number box sizing
--pmcdn-number-height .96rem Number height
--pmcdn-number-padding .06rem 0 0 0 Number padding
--pmcdn-label-box-sizing border-box Label box sizing
--pmcdn-label-height .4rem Label height
--pmcdn-label-padding 0 0 .06rem 0 Label padding
--pmcdn-divider-width 100% Divider width
--pmcdn-divider-height .02rem Divider height
--pmcdn-divider-margin 0 Divider margin
--pmcdn-separator-width .72rem Separator width

# Border

Name Default Description
--pmcdn-item-border-radius 0 Number item border radius

# Background

Name Default Description
--pmcdn-item-bg linear-gradient(88deg, #212124 -20.06%, #2d2b30 91.13%) Number item background gradient
--pmcdn-divider-bg rgba(51, 52, 56, .8) Divider background color

# Typography

Name Default Description
--pmcdn-number-color $color-text-invert-light Number color
--pmcdn-number-font-family 'DIN Black', 'PingFang SC', sans-serif Number font family
--pmcdn-number-font-size $font-size-xxl Number font size
--pmcdn-number-font-weight 900 Number font weight
--pmcdn-number-line-height 1.5 Number line height
--pmcdn-number-text-align center Number text alignment
--pmcdn-label-color $color-text-invert-default Label color
--pmcdn-label-font-size $font-size-xs Label font size
--pmcdn-label-font-weight $font-weight-regular Label font weight
--pmcdn-label-line-height 1.5 Label line height
--pmcdn-label-text-align center Label text alignment
--pmcdn-separator-color #212124 Separator color
--pmcdn-separator-font-family 'AgencyFB', sans-serif Separator font family
--pmcdn-separator-font-size .72rem Separator font size
--pmcdn-separator-font-weight $font-weight-bold Separator font weight

# Others

Name Default Description
--pmcdn-item-clip-path polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%) Number item clip path (chamfered effect)

← MatchCreateGame →