spz-countdown 倒计时

通过指定的日期，展示倒计时。

布局

何时使用

需要从当前时间倒计时到未来时间。
需要倒计时特定的时间，例如：59秒倒计时。
在特定情况下才启动倒计时，例如：输入邮箱正确后，点击发送验证码，才启动倒计时，59秒倒计时结束后才可以再次点击发送验证码。

代码演示

基本

简单的循环倒计时。

<spz-countdown layout="container" timeleft-seconds="59" loop>
  <template>
    <div>${s}</div>
  </template>
</spz-countdown>

手动启动

使用 restart 方法来手动启动倒计时，当倒计时结束，使用 @timeout 事件来隐藏倒计时元素。

<button @tap="countdown-restart.restart;">Start countdown</button>
<spz-countdown layout="container" timeleft-seconds="59" manual id="countdown-restart" @timeout="countdown-restart.hide">
  <template>
    <div>${s}</div>
  </template>
</spz-countdown>

属性

属性名	说明	类型	默认值	是否必需
timestamp-seconds	时间戳格式的截止时间，单位秒	number	-	是，除非配置了 `timeleft-seconds` 或 `end-date`
timeleft-seconds	指定增量时间，当前时间加上增加时间为截止时间，单位秒	number	-	是，除非配置了 `timestamp-seconds` 或 `end-date`
end-date	指定一个截止日期	dataType	-	是，除非配置了 `timeleft-seconds` 或 `timestamp-seconds`
offset-seconds	指定倒计时结束后继续倒计时的时间，需要配合 `loop` 属性一起使用才生效，单位秒	number	-	否
loop	如果该属性存在，支持循环倒计时。当没有配置 `offset-seconds` 属性时，只有配置了 `timeleft-seconds` 属性循环才生效	-	-	否
manual	如果该属性存在，只有手动调用 `restart` 方法才开始倒计时	-	-	-

模版内的 data 对象格式

属性名	描述	类型	默认值
d	天数	number	`0`
h	小时	number	`0`
m	分钟	number	`0`
s	秒	number	`0`
dd	天数，两位数	string	`00`
hh	小时，两位数	string	`00`
mm	分钟，两位数	string	`00`
ss	秒，两位数	string	`00`

dataType

支持的日期格式
YYYY/MM/DD
YYYY/MM/DD HH:mm
YYYY/MM/DD HH:mm:ss
YYYY-MM-DD
YYYY-MM-DD HH:mm
YYYY-MM-DD HH:mm:ss