CountDown 倒计时组件

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

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

<!-- 全局使用 -->
<hy-count-down time="3600 * 30 * 1000"></hy-count-down>

自定义格式

• 通过设置format来自定义格式

<template>
    <hy-count-down :time="30 * 60 * 60 * 1000" format="DD天HH时mm分ss秒"></hy-count-down>
</template>

毫秒级渲染

• 通过设置millisecond来自定义格式
• format这个值必须设置毫秒级

<template>
    <hy-count-down time="3600 * 30 * 1000" format="HH:mm:ss:SSS" millisecond></hy-count-down>
</template>

自定义样式

vue

<hy-count-down :time="30 * 60 * 60 * 1000" autoStart>
    <template #default="{ record: timeData }">
        <view class="time">
            <view class="time__custom">
                <text class="time__custom__item">
                    {{ timeData.hours > 10 ? timeData.hours : "0" + timeData.hours }}
                </text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
                <text class="time__custom__item">{{ timeData.minutes }}</text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
                <text class="time__custom__item">{{ timeData.seconds }}</text>
            </view>
        </view>
    </template>
</hy-count-down>

.scss

@import 'hy-app/index.scss';
.time {
    display: flex;
    align-items: center;

    &__custom {
        margin-top: 4px;
        width: 22px;
        height: 22px;
        background-color: $hy-primary;
        border-radius: 4px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;

        &__item {
            color: #fff;
            font-size: 12px;
            text-align: center;
        }
    }

    &__doc {
        color: $hy-primary;
        padding: 0 4px;
    }

    &__item {
        color: #606266;
        font-size: 15px;
        margin-right: 4px;
    }
}

手动控制

vue

<hy-count-down
    ref="countDownRef"
    :time="10 * 1000"
    format="ss:SSS"
    :autoStart="false"
    millisecond
></hy-count-down>
<view class="hy-flex">
    <hy-button text="重置" type="info" @click="reset"></hy-button>
    <hy-button text="开始" type="success" @click="start"></hy-button>
    <hy-button text="暂停" type="error" @click="pause"></hy-button>
</view>

.ts

import HyCountDown from 'hy-app/components/hy-count-down/hy-count-down.vue';
import { ref } from 'vue';

const countDownRef = ref<InstanceType<typeof HyCountDown>>();

const start = () => {
    if (countDownRef.value) {
        countDownRef.value.start();
    }
};

const pause = () => {
    if (countDownRef.value) {
        countDownRef.value.pause();
    }
};

const reset = () => {
    if (countDownRef.value) {
        countDownRef.value.reset();
    }
};

.scss

.hy-flex {
    display: flex;
    justify-content: space-around;
}

API

CountDown Props

参数	说明	类型	默认值
time	倒计时时长，单位ms	number	0
format	时间格式[^1]	string	HH:mm:ss
autoStart	是否自动开始倒计时	boolean	true
millisecond	是否展示毫秒倒计时	boolean	false

Events

事件名	说明	回调参数
change	过程中，倒计时变化时触发	time: 剩余的时间
finish	倒计时结束	-

Methods

事件名	说明
start	开始倒计时
pause	暂停倒计时
reset	重置倒计时

[^1] DD-日，HH-时，mm-分，ss-秒，SSS-毫秒

03:29