该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
#平台差异说明
| 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" autoStart millisecond @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" 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> </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-down ref="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>
