倒计时

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Props

参数	说明	类型	可选值	默认值
splitor	分割符，和 layout 长度同步	string / array	cn / en	["天", ":", ":", ""]
layout	布局	array		["day", "hour", "minute", "second"]
mode	模式	string	default / simple	default
day	还剩 n 天	number		0
hour	还剩 n 时	number		0
minute	还剩 n 分	number		0
second	还剩 n 秒	number		0
datetime	日期	date / string
is-millisecond	是否带有毫秒	boolean		false
custom-style	自定义样式	object
number-style	数字样式	object
splitor-style	分隔符样式	object

Events

事件名称	说明	回调参数
stop	停止时触发
done	结束时触发

Methods

事件名称	说明	参数
next	继续
stop	暂停

示例

基本用法

<cl-countdown :minute="10"></cl-countdown>

修改分割符

<cl-countdown :minute="10" splitor="cn"></cl-countdown>

<cl-countdown :minute="10" splitor="en"></cl-countdown>

<cl-countdown :minute="10" :splitor="['Tian', 'Shi', 'Fen', 'Miao']"></cl-countdown>

精简模式，过滤 00

<cl-countdown :hour="1" :minute="0" :second="5" mode="simple"></cl-countdown>

自定义布局

<cl-countdown
	datetime="2020-12-31"
	:layout="['minute', 'second']"
	:splitor="['分', '秒']"
></cl-countdown>

<cl-countdown
	datetime="2020-12-31"
	:layout="['second', 'minute']"
	:splitor="['秒', '分']"
></cl-countdown>

自定义样式，由于多层组件嵌套问题，可以通过 custom-style, number-style, splitor-style 来设置样式。

<cl-countdown
	:hour="2"
	:number-style="{
		'background-color': '#000',
		'border-radius': '10rpx',
		color: '#fff',
		margin: '0 10rpx',
	}"
></cl-countdown>