CountDown 倒计时 ¶

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

平台差异说明 ¶

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用 ¶

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

html

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

自定义格式 ¶

说明：通过绑定change回调的值，进行自定义格式

html

<template>
    <up-count-down
        :time="30 * 60 * 60 * 1000"
        format="DD:HH:mm:ss"
        autoStart
        millisecond
        @change="onChange"
    >
        <view class="time">
            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
        </view>
    </up-count-down>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e
            }
        }
    }
</script>

<style>
.time {
  diplay: flex;
  align-items: center;
}
.time__item {
  color: #fff;
  font-size: 12px;
  text-align: center;
}
</style>

毫秒级渲染 ¶

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

html

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

自定义样式 ¶

说明：通过绑定change回调的值，进行自定义格式

html

<template>
    <up-count-down
            :time="30 * 60 * 60 * 1000"
            format="HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
    >
        <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>
    </up-count-down>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e
            }
        }
    }
</script>
<style>
.time {
  display: flex;
  align-items: center;
}

.time__custom {
  margin-top: 4px;
  width: 22px;
  height: 22px;
  background-color: var(--u-primary);
  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: var(--u-primary);
  padding: 0px 4px;
}

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

手动控制 ¶

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

html

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

<script>
export default {
    data() {
        return {
            timeData: {},
        }
    },
    methods: {
        //开始
        start() {
            this.$refs.countDown.start();
        },
        // 暂停
        pause() {
            this.$refs.countDown.pause();
        },
        // 重置
        reset() {
            this.$refs.countDown.reset();
        },
        onChange(e) {
            this.timeData = e
        }
    }
}
</script>

此页面源代码地址 ¶

页面源码地址

github

gitee

API ¶

Props ¶

参数	说明	类型	默认值	可选值
time	倒计时时长，单位ms	String \| Number	0	-
format	时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒	String	HH:mm:ss	-
autoStart	是否自动开始倒计时	Boolean	true	false
millisecond	是否展示毫秒倒计时	Boolean	false	true

Events ¶

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

Methods ¶

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

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