TUI

<template>
  <TsCountDown :etime="2 * 60 * 1000" />
  <TsCountDown :etime="2 * 60 * 1000" :millisecond="2" />
  <TsCountDown :etime="2 * 60 * 1000" unit="zh" />
  <TsCountDown :etime="2 * 60 * 1000" unit="zh" :millisecond="2" />
  <TsCountDown :etime="2 * 60 * 1000" format="HH:mm:ss" />
  <TsCountDown :etime="2 * 60 * 1000" format="DD:HH:mm:ss:SSS" :padZero="true" />
</template>

<template>
  <TsCountDown :etime="5000" :autoStart="false" :padZero="true" :millisecond="2"/>
  <TsCountDown :etime="10000" :millisecond="1" format="ss:SSS" />
  <TsCountDown :etime="86400000" :precision="'hours'" />
  <TsCountDown :etime="86400000" unit="zh" />
  <TsCountDown :etime="10000" :padZero="true" format="HH:mm:ss" />
</template>

<template>
  <TsCountDown :etime="10000" @change="handleChange" @end="handleEnd" />
</template>

<script setup lang="ts">
  const play = ref(false);
  const handleEnd = ()=>{
    console.log('[end] 倒计时已结束');
  }
</script>

<template>
  <TsCountDown ref="cutRef" :etime="15000" :millisecond="2"/>
  <div style="margin-top: 16px; display: flex; column-gap: 8px">
    <TsButton size="small" @click="cutRef?.start()">开始</TsButton>
    <TsButton size="small" @click="cutRef?.pause()">暂停</TsButton>
    <TsButton size="small" @click="cutRef?.resume()">继续</TsButton>
    <TsButton size="small" @click="cutRef?.reset()">重置</TsButton>
  </div>
</template>

<template>
  <TsCountDown :etime="2 * 60 * 1000" :padZero="true" :millisecond="2">
    <template #default="{ timeData }">
      <div style="display: flex; column-gap: 3px">
        <div style="padding: 0 5px; border-radius: 5px; background-color: #0d8ef7; color: #fff; font-size: 12px">{{ timeData.days }}</div>
        <div>:</div>
        <div style="padding: 0 5px; border-radius: 5px; background-color: #0d8ef7; color: #fff; font-size: 12px">{{ timeData.hours }}</div>
        <div>:</div>
        <div style="padding: 0 5px; border-radius: 5px; background-color: #0d8ef7; color: #fff; font-size: 12px">{{ timeData.minutes }}</div>
        <div>:</div>
        <div style="padding: 0 5px; border-radius: 5px; background-color: #0d8ef7; color: #fff; font-size: 12px">{{ timeData.seconds }}</div>
        <div>:</div>
        <div style="padding: 0 5px; border-radius: 5px; background-color: #0d8ef7; color: #fff; font-size: 12px">{{ timeData.milliseconds }}</div>
      </div>
    </template>
  </TsCountDown>
</template>