uv-ui

# CountDown 倒计时

✈

组件名：uv-count-down

点击下载&安装 (opens new window)

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

# 平台兼容性

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

# 基本使用

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

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

# 自定义格式

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

<template>
	<uv-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>
	</uv-count-down>
</template>
<script>
	export default {
		data() {
			return {
				timeData: {}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>
<style lang="scss">
	.time {
		// #ifndef APP-NVUE
		display: flex;
		// #endif
		flex-direction: row;
		align-items: center;
		&__item {
			color: red;
			font-size: 30rpx;
			text-align: center;
		}
	}
</style>

# 毫秒级渲染

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

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

# 手动控制

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

<template>
	<uv-count-down 
		ref="countDown" 
		:time="10* 1000" 
		format="ss:SSS" 
		:autoStart="false" 
		millisecond 
		@change="onChange">
	</uv-count-down>
	<button type="primary" size="small" @click="reset">重置</button>
	<button type="primary" size="small" @click="start">开始</button>
	<button type="primary" size="small" @click="pause">暂停</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>

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# CountDown Props

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

# CountDown Methods

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

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

# CountDown Events

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

← CountTo 数字滚动 →