# tui-countdown 倒计时开源组件

介绍

支持显示天、时、分、秒倒计时，支持单独秒数，支持设置大小，颜色等。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiCountdown from "@/components/thorui/tui-countdown/tui-countdown.vue"
export default {
	components:{
		tuiCountdown
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-countdown": "/components/thorui/tui-countdown/tui-countdown"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 time 属性传入剩余时间 (单位：秒)。

<!--uni-app-->
<tui-countdown :time="1000"></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}"></tui-countdown>

展示毫秒

通过 isMs 属性设置毫秒的展示，毫秒使用css模拟替代js频繁更新操作。

<!--uni-app-->
<tui-countdown :time="1000" isMs></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}" isMs></tui-countdown>

冒号替换成文字

通过 isColon 属性设置将冒号显示为文字，默认为true，即显示冒号。

<!--uni-app-->
<tui-countdown :time="1000" :isColon="false"></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}" isColon="{{false}}"></tui-countdown>

# Slots

插槽名称	插槽说明
-	-

# Props

属性名	类型	说明	默认值
width	Number	数字框宽度，单位rpx	25
height	Number	数字框高度，单位rpx	25
borderColor	String	数字框border颜色	#333
backgroundColor	String	数字框背景颜色	#fff
size	Number	数字框字体大小，单位rpx	24
color	String	数字框字体颜色	#333
scale	Boolean	是否缩放 0.9	false
colonSize	Number	冒号大小，单位rpx	28
colonColor	String	冒号颜色	#333
time	Number	剩余时间 (单位：秒)	0
days	Boolean	是否包含天	false
hours	Boolean	是否包含小时	true
minutes	Boolean	是否包含分钟	true
seconds	Boolean	是否包含秒	true
unitEn	Boolean	单位用英文缩写表示仅seconds秒数有效	false
isColon	Boolean	是否展示为冒号,false为文字	true
returnTime	Boolean	是否返回剩余时间	false
isMs	Boolean	是否显示毫秒	false
msWidth	Number	毫秒框宽度，单位rpx	32
msSize	Number	毫秒字体大小，单位rpx	24
msColor	String	毫秒字体颜色	#333

# Events

注：uni-app端绑定事件使用@前缀，如@end；微信小程序原生使用bind前缀，如bindend

事件名	说明	回调参数
end	倒计时结束事件	{}
time	返回剩余时间事件，每秒返回	{seconds:Number} //剩余秒数

# Methods

如何调用方法详见进阶用法介绍

方法名	说明	传入参数
endOfTime V2.0.0+	结束倒计时	isStop:是否中断，为true时不触发end事件
reset V2.9.0+	重置倒计时	seconds:剩余秒数，不传值则使用属性time值