# 倒计时

# 平台差异

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>