qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Countdown 倒计时

倒计时组件

使用指南

在 Taro 文件中引入组件

import { AtCountdown } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/countdown.scss";

一般用法

说明： 开发者可以设置 onTimeUp 倒计时时间到回调事件

<template>
  <view>
    <AtCountdown
      :format="{ hours: ':', minutes: ':', seconds: '' }"
      :seconds="10"
      @time-up="onTimeUp"
    />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
export default {
  name: 'AtCountdownDemo',
  methods: {
    onTimeUp () {
      Taro.showToast({
        title: '时间到',
        icon: 'success',
        duration: 2000
      })
    }
  }
}
</script>

显示天数

<AtCountdown
  isShowDay
  :day="2"
  :hours="1"
  :minutes="1"
  :seconds="10"
/>

自定义格式化

<AtCountdown
  isShowDay
  :format="{ hours: ':', minutes: ':', seconds: '' }"
  :day="2"
  :hours="1"
  :minutes="1"
  :seconds="10"
/>

卡片式

<AtCountdown
  isCard
  :minutes="1"
  :seconds="10"
/>

参数

参数说明类型可选值默认值
isCard是否显示卡片式样式Boolean-false
isShowDay是否显示天数Boolean-false
isShowHour是否显示小时Boolean-true
format格式化分割符号Object-day: '天',hours: '时',minutes: '分',seconds: '秒'
day天数Number-0
hours小时Number-0
minutes分钟Number-0
seconds秒Number-0

事件

事件名称说明返回参数
onTimeUp倒计时时间到，执行的回调函数-