Tui Plus Vapor

Appearance

t-count-down ​

CountDown 倒计时

组件介绍 ​

t-count-down 是一个倒计时组件，用于在界面上显示一个倒计时，可以自定义倒计时格式和持续时间。组件支持开始、暂停和继续倒计时，以及停止倒计时功能，适用于活动倒计时、商品促销倒计时、会议倒计时等场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/count-down/count-down.uvue，通过 time 属性设置倒计时时间（毫秒），通过 format 属性设置倒计时格式。

vue
<template>
  <!-- 基础倒计时 -->
  <t-count-down :time="3600000" class="mb-30"></t-count-down>
  
  <!-- 自定义格式倒计时 -->
  <t-count-down :time="3600000" format="mm:ss" class="mb-30"></t-count-down>
  
  <!-- 自定义显示样式 -->
  <t-count-down :time="3600000" ref="countDownRef" class="mb-30">
    <template #default="{ times }">
      <view class="flex items-center">
        <view class="w-30 h-30 bg-primary text-white rounded flex items-center justify-center mr-10">
          {{ times.hh }}
        </view>
        <text class="text-20">:</text>
        <view class="w-30 h-30 bg-primary text-white rounded flex items-center justify-center mx-10">
          {{ times.MM }}
        </view>
        <text class="text-20">:</text>
        <view class="w-30 h-30 bg-primary text-white rounded flex items-center justify-center ml-10">
          {{ times.ss }}
        </view>
      </view>
    </template>
  </t-count-down>
  
  <!-- 控制按钮 -->
  <view class="flex space-x-20">
    <t-button @click="pauseCountDown">暂停</t-button>
    <t-button @click="continueCountDown">继续</t-button>
    <t-button @click="stopCountDown">停止</t-button>
    <t-button @click="startCountDown">开始</t-button>
  </view>
</template>

<script setup>
const countDownRef = ref(null);

function pauseCountDown() {
  countDownRef.value?.pause();
}

function continueCountDown() {
  countDownRef.value?.continues();
}

function stopCountDown() {
  countDownRef.value?.stops();
}

function startCountDown() {
  countDownRef.value?.start();
}
</script>

Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring''
size组件尺寸，可选 large、medium、small、ministring''
time倒计时时间（毫秒）number0
format倒计时格式string'hh:MM:ss'
textClass文本样式any''

Events ​

事件名说明回调参数
start开始倒计时时触发-
stop停止倒计时时触发-
pause暂停倒计时时触发-
continues继续倒计时时触发-
change倒计时变化时触发number
click点击时触发UniPointerEvent
initFinished组件初始化完成时触发，返回组件节点信息NodeInfo
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-
transitionend动画结束时触发-

Slots ​

插槽名说明
default默认插槽，用于自定义倒计时显示内容，提供 times 对象包含时、分、秒等信息