Tantalum UI

Appearance

Return to top
On this page

CountDown 倒计时

注：

  • 本组件没有指定样式，默认情况下可对文字样式进行自定义。
vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="默认" class="exp-countDown-box">
      <ta-count-down :initialTiming="time"></ta-count-down>
    </ta-cell>
    <ta-cell label="显示天数" class="exp-countDown-box">
      <ta-count-down :initialTiming="time2" showDays></ta-count-down>
    </ta-cell>
  </ta-group>
  <ta-group title="Slot">
    <ta-cell label="中文显示" class="exp-countDown-box">
      <ta-count-down :initialTiming="time3">
        <template #default="countDown">
          {{ countDown.fullHours }}时{{ countDown.minutes }}分{{ countDown.seconds }}秒
        </template>
      </ta-count-down>
    </ta-cell>
    <ta-cell label="毫秒" class="exp-countDown-box">
      <ta-count-down :initialTiming="time5">
        <template #default="countDown">
          {{ countDown.fullHours }}:{{ countDown.minutes }}:{{ countDown.seconds }}.{{
            countDown.milliseconds
          }}
        </template>
      </ta-count-down>
    </ta-cell>
    <ta-cell label="自定义风格" class="exp-countDown-box">
      <ta-count-down :initialTiming="time3">
        <template #default="countDown">
          <span class="exp-countDown-time-item">{{ countDown.fullHours }}</span
          ><span class="exp-countDown-time-item">{{ countDown.minutes }}</span
          ><span class="exp-countDown-time-item">{{ countDown.seconds }}</span>
        </template>
      </ta-count-down>
    </ta-cell>
  </ta-group>
  <ta-group title="时间监听">
    <ta-cell label="pause/resume/end" class="exp-countDown-box">
      <div class="exp-countDown-time-r">
        <ta-count-down
          :initialTiming="time4"
          @pause="onPause"
          @resume="onResume"
          @end="onEnd"
          ref="countDownRef"
        ></ta-count-down>
      </div>
      <ta-button @click="onSwitch" size="small">{{ paused ? '恢复' : '暂停' }}</ta-button>
      <ta-button @click="onReset" size="small" type="danger"> 重置 </ta-button>
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
  type CountDownOnEnd,
  type CountDownOnPause,
  type CountDownOnResume,
  type CountDownRef,
  showToast
} from '@/index'

export default defineComponent({
  name: 'ExpCountDown',
  setup() {
    const paused = ref(false)
    const countDownRef = ref<CountDownRef>()

    const onPause: CountDownOnPause = e => {
      console.log('pause', e)
      paused.value = true
      showToast('已暂停')
    }

    const onResume: CountDownOnResume = e => {
      console.log('resume', e)
      paused.value = false
      showToast('继续计时')
    }

    const onEnd: CountDownOnEnd = e => {
      console.log('end', e)
      showToast('计时结束')
    }

    function onSwitch() {
      if (paused.value) {
        countDownRef.value?.resume()
      } else {
        countDownRef.value?.pause()
      }
    }

    function onReset() {
      countDownRef.value?.reset(100 * 1000)
      paused.value = false
    }

    return {
      time: 300 * 1000,
      time2: 1.5 * 24 * 3600 * 1000,
      time3: 300 * 1000,
      time4: 100 * 1000,
      time5: 300 * 1000,
      paused,

      onPause,
      onResume,
      onEnd,
      countDownRef,
      onSwitch,
      onReset
    }
  }
})
</script>

Import

js
import { TaCountDown } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type {
  CountTime,
  CountDownOnEnd,
  CountDownOnPause,
  CountDownOnResume,
  CountDownRef
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
initial-timingnumber99否初始倒计时时长，单位 ms
show-daysbooleanfalse否是否显示天数

Events

事件描述回调函数参数TypeScript 函数
pause计时暂停时触发payload: { remainTime: number } remainTime 剩余时间，单位 msCountDownOnPause
resume恢复计时时触发payload: { remainTime: number } remainTime 剩余时间，单位 msCountDownOnResume
end计时结束时触发payload: { startTime: number, endTime: number } startTime 本地开始时间戳，endTime 本地结束时间戳，单位 msCountDownOnEnd

Slots

支持自定义风格显示（#default）

vue
<ta-count-down :initial-timing="timestamp">
  <template #default="countTime">
    {{ countTime.fullHours }}:{{ countTime.minutes }}:{{
        countTime.seconds
    }}.{{ countTime.milliseconds }}
  </template>
</ta-count-down>

countTime 的结构

字段名类型说明
timenumber持续时间
daysstring天数
hoursstring小时数（<24），需要跟 days 配合，保留 2 位
fullHoursstring小时数，含天数综合，如 '124'，至少保留 2 位
thousandsFullHoursstring千分位形式的小时数，含天数综合，如 '1,234'
minutesstring分钟数，保留 2 位
secondsstring秒钟数，保留 2 位
millisecondsstring毫秒数，保留 3 位

Methods

方法名说明参数
pause暂停倒计时
resume恢复倒计时
reset重置倒计时( timing: number, autoStart?: boolean ) 单位 ms