CountDown 倒计时

概述

CountDown 倒计时，用于倒计时场景，可手动控制。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiCountDown from "@/components/firstui/fui-count-down/fui-count-down.vue"
export default {
	components:{
		fuiCountDown
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 value 属性设置剩余时间（单位秒），@end 为倒计时结束事件。

<fui-count-down :value="30" @end="end"></fui-count-down>

methods: {
	end(e) {
		console.log(e)
		this.fui.toast('倒计时结束~')
	}
}

手动控制

通过 background 属性设置数字框背景色，color 属性设置数字框字体颜色，colonColor 属性设置冒号颜色，isMs 属性设置是否显示毫秒，msWidth 属性设置毫秒数字框宽度，autoStart 属性设置是否自动开始倒计时。

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<fui-count-down background="#333" color="#fff" colonColor="#333" isMs msWidth="40" :value="30" :autoStart="false" @end="end" ref="countdown"></fui-count-down>

methods: {
	//开始倒计时
	startCountdown(e) {
		this.$refs.countdown.startCountdown()
	},
	//暂停倒计时
	endCountdown(){
		this.$refs.countdown.endCountdown(true)
	},
	//重置倒计时
	resetCountdown(){
		this.$refs.countdown.resetCountdown()
	}
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	倒计时数字框宽度，单位rpx，不包含毫秒数字框	40	-
height	Number, String	倒计时数字框高度，单位rpx	40	-
borderColor	String	数字框边框颜色	#333	-
background	String	数字框背景颜色	#fff	-
size	Number, String	数字框字体大小，单位rpx	28	-
color	String	数字框字体颜色	#333	-
colonSize	Number, String	冒号或文字大小，单位rpx	28	-
colonColor	String	冒号或文字颜色	#333	-
value	Number, String	倒计时剩余时间，单位秒（s）	0	-
isDays	Boolean	是否显示天	false	-
isHours	Boolean	是否显示小时	true	-
isMinutes	Boolean	是否显示分钟	true	-
isSeconds	Boolean	是否显示秒数	true	-
unitEn	Boolean	秒数单位用s表示	false	-
isMs	Boolean	是否显示毫秒	false	-
msWidth	Number, String	毫秒数字框宽度，单位rpx	36	-
msSize	Number, String	毫秒数字框字体大小，单位rpx	24	-
msColor	String	毫秒数字框字体颜色，为空则使用 color 属性值	-	-
isColon	Boolean	时分秒是否展示为冒号,为false时显示为文字	true	-
returnTime	Boolean	是否返回剩余时间，为true时，触发@time事件	false	-
autoStart	Boolean	是否自动开始倒计时	true	-

Events

事件名	说明	回调参数
@end	倒计时结束时触发	-
@time	倒计时时间返回，returnTime 属性为true时有效	{   seconds:剩余秒数 }

Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
startCountdown	倒开始计时	-
resetCountdown	重置倒计时	seconds:剩余秒数，不传值则默认使用value值
endCountdown	暂停或结束倒计时	isSuspend:是否为暂停，传true时不触发@end事件

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)