TUI

<template>
  <div class="component-card-demo-wrap countdown-demo-column">
    <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" />
  </div>
</template>

<script setup lang="ts">
import { TsCountDown } from 'tui';
</script>

<style scoped>
.countdown-demo-column {
  flex-direction: column;
  gap: 10px;
}
</style>

<template>
  <div class="component-card-demo-wrap countdown-demo-column">
    <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" />
  </div>
</template>

<script setup lang="ts">
import { TsCountDown } from 'tui';
</script>

<style scoped>
.countdown-demo-column {
  flex-direction: column;
  gap: 10px;
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsCountDown :etime="8000" @change="handleChange" @end="handleEnd" />
  </div>
</template>

<script setup lang="ts">
import { TsCountDown } from 'tui';

const handleChange = (value: number) => {
  console.log('[change] 倒计时剩余毫秒：', value);
};

const handleEnd = () => {
  console.log('[end] 倒计时已结束');
};
</script>

<template>
  <div class="component-card-demo-wrap countdown-demo-column">
    <TsCountDown ref="cutRef" :autoStart="false" :etime="15000" :millisecond="2" />
    <div class="countdown-demo-actions">
      <TsButton size="small" type="primary" @click="cutRef?.start()">开始</TsButton>
      <TsButton size="small" @click="cutRef?.pause()">暂停</TsButton>
      <TsButton size="small" @click="cutRef?.resume()">继续</TsButton>
      <TsButton size="small" type="danger" @click="cutRef?.reset()">重置</TsButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsCountDown } from 'tui';

const cutRef = ref<InstanceType<typeof TsCountDown> | null>(null);
</script>

<style scoped>
.countdown-demo-column {
  flex-direction: column;
  gap: 10px;
}

.countdown-demo-actions {
  margin-top: 6px;
  display: flex;
  column-gap: 8px;
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsCountDown :etime="2 * 60 * 1000" :padZero="true" :millisecond="2">
      <template #default="{ timeData }">
        <div class="countdown-slot-wrap">
          <div class="countdown-slot-item">{{ timeData.days }}</div>
          <div>:</div>
          <div class="countdown-slot-item">{{ timeData.hours }}</div>
          <div>:</div>
          <div class="countdown-slot-item">{{ timeData.minutes }}</div>
          <div>:</div>
          <div class="countdown-slot-item">{{ timeData.seconds }}</div>
          <div>:</div>
          <div class="countdown-slot-item">{{ timeData.milliseconds }}</div>
        </div>
      </template>
    </TsCountDown>
  </div>
</template>

<script setup lang="ts">
import { TsCountDown } from 'tui';
</script>

<style scoped>
.countdown-slot-wrap {
  display: flex;
  column-gap: 3px;
  align-items: center;
}

.countdown-slot-item {
  padding: 0 5px;
  border-radius: 5px;
  background-color: #0d8ef7;
  color: #fff;
  font-size: 12px;
}
</style>