该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。

基本使用

• 通过time参数设置倒计时间，单位为ms

<template>
	<un-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></un-count-down>
</template>

自定义格式

• 说明：通过插槽的方式自定义显示格式

<template>
    <un-count-down
        :time="30 * 60 * 60 * 1000"
        format="DD:HH:mm:ss"
        autoStart
        millisecond
    >
        <template #default="{ days, hours, minutes, seconds, milliseconds }">
            <text class="time__item">{{ days }}天</text>
            <text class="time__item">{{ hours }}时</text>
            <text class="time__item">{{ minutes }}分</text>
            <text class="time__item">{{ seconds }}秒</text>
        </template>
    </un-count-down>
</template>

<style lang="css">
.time__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
}
</style>

毫秒级渲染

• 通过配置millisecond来开启毫秒级倒计时

<un-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></un-count-down>

自定义样式

• 说明：通过插槽的方式自定义样式

<template>
    <un-count-down
        :time="30 * 60 * 60 * 1000"
        format="HH:mm:ss"
        autoStart
        millisecond
    >
        <template #default="{ hours, minutes, seconds }">
            <view class="time">
                <view class="time__custom">
                    <text class="time__custom__item">{{ hours }}</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                    <text class="time__custom__item">{{ minutes }}</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                    <text class="time__custom__item">{{ seconds }}</text>
                </view>
            </view>
        </template>
    </un-count-down>
</template>

<style lang="css">
.time {
    display: flex;
    align-items: center;

    .time__custom {
        margin-top: 4px;
        width: 22px;
        height: 22px;
        background-color: #3c9cff;
        border-radius: 4px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;

        .time__custom__item {
            color: #fff;
            font-size: 12px;
            text-align: center;
        }
    }

    .time__doc {
        color: #3c9cff;
        padding: 0px 4px;
    }
}
</style>

手动控制

• 说明：通过绑定ref进行手动控制重置、开始、暂停

<template>
    <un-count-down
        ref="countDownRef"
        :time="3* 1000"
        format="ss:SSS"
        :autoStart="false"
        millisecond
    >
    </un-count-down>
    <un-button text="重置" size="normal" type="info" @click="reset"></un-button>
    <un-button text="开始" size="normal" type="success" @click="start"></un-button>
    <un-button text="暂停" size="normal" type="error" @click="pause"></un-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const countDownRef = ref<UnCountDownComponentPublicInstance | null>(null);

// 开始
const start = () => {
    countDownRef.value?.start()
}

// 暂停
const pause = () => {
    countDownRef.value?.pause()
}

// 重置
const reset = () => {
    countDownRef.value?.reset()
}
</script>

API

Props

参数	说明	类型	默认值
time	倒计时时长，单位ms	string | number	0
format	时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒	string	HH:mm:ss
autoStart	是否自动开始倒计时	Boolean	true
millisecond	是否展示毫秒倒计时	Boolean	false
keepAlive	是否保持倒计时状态，即组件销毁后，倒计时是否继续运行	Boolean	false
uniqueKey	唯一键值，用于在 keep-alive 中保持倒计时状态	string	'UVIEW_COUNT_DOWN'
padZero	是否在天、小时、分钟、秒数前补零	Boolean	true

Events

事件名	说明	类型
change	过程中，倒计时变化时触发	Function
finish	倒计时结束	Function

Methods

需要通过ref获取倒计时组件才能调用

名称	说明	类型
start	开始倒计时	Function
pause	暂停倒计时	Function
resume	继续倒计时	Function
reset	重置倒计时	Function

Slots

名称	说明	参数
default	自定义内容	{ days: string, hours: string, minutes: string, seconds: string, milliseconds: string }

注意： 当 format 参数不包含 DD 时，hours 会包含天数转换的小时数（即 days * 24 + hours）。

数据类型

/**
 * 当前时间类型
 * 用于表示倒计时的当前状态，补零后为字符串类型，不补0时为数字类型
 */
type UnCurrentTime = {
    total: number;  // 剩余总毫秒数
    days: number | string;  // 剩余天数
    hours: number | string;  // 剩余小时数（0-23）
    minutes: number | string;  // 剩余分钟数（0-59）
    seconds: number | string;  // 剩余秒数（0-59）
    milliseconds: number | string;  // 剩余毫秒数（0-999）
}

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-count-down-text-color	$text-color	文本颜色
$un-count-down-text-font-size	$text-base	文本字体大小
$un-count-down-text-line-height	$line-base	文本行高