# tui-countdown 倒计时

介绍

支持显示天、时、分、秒倒计时,支持单独秒数,支持设置大小,颜色等。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiCountdown from "@/components/thorui/tui-countdown/tui-countdown"
export default {
	components:{
		tuiCountdown
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-countdown": "/components/thorui/tui-countdown/tui-countdown"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用

通过 time 属性传入剩余时间 (单位:秒)。

<!--uni-app-->
<tui-countdown :time="1000"></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}"></tui-countdown>
展示毫秒

通过 isMs 属性设置毫秒的展示,毫秒使用css模拟替代js频繁更新操作。

<!--uni-app-->
<tui-countdown :time="1000" isMs></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}" isMs></tui-countdown>
冒号替换成文字

通过 isColon 属性设置将冒号显示为文字,默认为true,即显示冒号。

<!--uni-app-->
<tui-countdown :time="1000" :isColon="false"></tui-countdown>

<!--微信小程序-->
<tui-countdown time="{{1000}}" isColon="{{false}}"></tui-countdown>

# Slots

none

# Props

参数 类型 说明 默认值
width Number 数字框宽度,单位rpx 25
height Number 数字框高度,单位rpx 25
borderColor String 数字框border颜色 #333
backgroundColor String 数字框背景颜色 #fff
size Number 数字框字体大小,单位rpx 24
color String 数字框字体颜色 #333
scale Boolean 是否缩放 0.9 false
colonSize Number 冒号大小,单位rpx 28
colonColor String 冒号颜色 #333
time Number 剩余时间 (单位:秒) 0
days Boolean 是否包含天 false
hours Boolean 是否包含小时 true
minutes Boolean 是否包含分钟 true
seconds Boolean 是否包含秒 true
unitEn Boolean 单位用英文缩写表示 仅seconds秒数有效 false
isColon Boolean 是否展示为冒号,false为文字 true
returnTime Boolean 是否返回剩余时间 false
isMs Boolean 是否显示毫秒 false
msWidth Number 毫秒框宽度,单位rpx 32
msSize Number 毫秒字体大小,单位rpx 24
msColor String 毫秒字体颜色 #333

# Events

事件名 说明 回调参数
end 倒计时结束事件 {}
time 返回剩余时间事件,每秒返回 {seconds:Number} //剩余秒数

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码