spz-countdown#

#When to Use

• When you need to count down from the current time to a future time.
• When you need to count down a specific time, for example: a 59-second countdown.
• Start the countdown only under specific circumstances, for example: after entering the correct email, click to send the verification code, then start the countdown. You can only click to send the verification code again after the 59-second countdown is over.

#Code Demonstration

#Basic

A simple loop countdown.

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

#Manual Start

Use the restart method to manually start the countdown, and use the @timeout event to hide the countdown element when the countdown ends.

<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>

#Properties

#Data Object Format within the Template

#dataType

#Methods

#restart

Restart the countdown, no parameters needed.

#Events

timeout

This event is automatically triggered when the countdown ends.

#AI Summary (LLM Ready)

• Component ID: spz-countdown
• One-line purpose: Displays a countdown by specifying a date.
• Detected attribute rows: 0
• Detected method subsections: 1
• Detected event subsections: 1
• Top attribute names: none (needs manual completion)
• Top method names: restart
• Top event names: timeout
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/