该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
- 通过
time参数设置倒计时间，单位为ms
<template><u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
</template>
copy
#自定义格式
- 说明：通过绑定
change回调的值，进行自定义格式
<template><u-count-down:time="30 * 60 * 60 * 1000"format="DD:HH:mm:ss"autoStartmillisecond@change="onChange"><view class="time"><text class="time__item">{{ timeData.days }} 天</text><text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}} 时</text><text class="time__item">{{ timeData.minutes }} 分</text><text class="time__item">{{ timeData.seconds }} 秒</text></view></u-count-down>
</template><script>export default {data() {return {timeData: {},}},methods: {onChange(e) {this.timeData = e}}}
</script><style lang="scss">
.time {@include flex;align-items: center;&__item {color: #fff;font-size: 12px;text-align: center;}
}
</style>
copy
#毫秒级渲染
- 通过配置
millisecond来开启毫秒级倒计时
<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>
copy
#自定义样式
- 说明：通过绑定
change回调的值，进行自定义格式
<template><u-count-down:time="30 * 60 * 60 * 1000"format="HH:mm:ss"autoStartmillisecond@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></u-count-down>
</template><script>export default {data() {return {timeData: {},}},methods: {onChange(e) {this.timeData = e}}}
</script><style lang="scss">
.time {@include flex;align-items: center;&__custom {margin-top: 4px;width: 22px;height: 22px;background-color: $u-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: $u-primary;padding: 0px 4px;}&__item {color: #606266;font-size: 15px;margin-right: 4px;}
}
</style>
copy
#手动控制
- 说明：通过绑定
ref进行手动控制重置、开始、暂停
<template><u-count-downref="countDown":time="3* 1000"format="ss:SSS":autoStart="false"millisecond@change="onChange"></u-count-down><u-button text="重置" size="normal" type="info" @click="reset"></u-button><u-button text="开始" size="normal" type="success" @click="start"></u-button><u-button text="暂停" size="normal" type="error" @click="pause"></u-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>
)
