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>

#属性

#模版内的 data 对象格式

#dataType

#方法

#restart

重新启动倒计时，不需要参数。

#事件

timeout

当倒计时结束时自动触发该事件。

#AI 摘要（LLM Ready）

• 组件标识：spz-countdown
• 用途一句话：通过指定的日期，展示倒计时。
• 可识别属性条目：23
• 可识别方法小节：1
• 可识别事件小节：1
• 关键属性名（Top）：timestamp-seconds、timeleft-seconds、end-date、offset-seconds、loop、manual
• 关键方法名（Top）：restart
• 关键事件名（Top）：timeout
• 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
• 关联文档：/guide/actions-and-events/ 、/guide/layouts/