Tui Plus Vapor

# t-count-down

CountDown 倒计时

t-count-down 组件介绍

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

t-count-down 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-count-down 基础用法

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

vue

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="CountDown 倒计时"
				class="mlrt-15"
				sub-title="倒计时组件可展示倒计时，能自定义格式和时长。支持启停等操作，适用于活动等场景，支持插槽自定义显示。"></t-card>
		<introduction title="自定义样式">
			<t-count-down>
				5000000
				<template v-slot:default="{ times }">
					<t-row class="fl">
						<view class="bg-#f56c6c r-5 twh-25 fc">
							<text class="c-#fff">{{(times as UTSJSONObject)['hours']}}</text>
						</view>
						<text class="c-#f56c6c sfwb plr-5">:</text>
						<view class="bg-#f56c6c r-5 twh-25 fc">
							<text class="c-#fff">{{(times as UTSJSONObject)['minutes']}}</text>
						</view>
						<text class="c-#f56c6c sfwb plr-5">:</text>
						<view class="bg-#f56c6c r-5 twh-25 fc">
							<text class="c-#fff">{{(times as UTSJSONObject)['seconds']}}</text>
						</view>
					</t-row>
				</template>
			</t-count-down>
		</introduction>
		<introduction title="自定义样式">
			<t-count-down>
				5000000
				<template v-slot:default="{ times }">
					<t-row class="fl faic">
						<t-number mode='gl'>{{(times as UTSJSONObject)['hours']}}</t-number>
						<text class="sfwb mlr-10">:</text>
						<t-number mode='gl'>{{(times as UTSJSONObject)['minutes']}}</t-number>
						<text class="sfwb mlr-10">:</text>
						<t-number mode='gl'>{{(times as UTSJSONObject)['seconds']}}</t-number>
					</t-row>
				</template>
			</t-count-down>
		</introduction>
		<introduction title="自定义样式">
			<t-count-down>
				5000000
				<template v-slot:default="{ times }">
					<t-row class="fl faic">
						<t-number>{{(times as UTSJSONObject)['hours']}}</t-number>
						<text class="sfwb mlr-10">:</text>
						<t-number>{{(times as UTSJSONObject)['minutes']}}</t-number>
						<text class="sfwb mlr-10">:</text>
						<t-number>{{(times as UTSJSONObject)['seconds']}}</t-number>
					</t-row>
				</template>
			</t-count-down>
		</introduction>
		<introduction title="基础功能">
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="primary">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="error">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="warning">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="success">50000</t-count-down>
		</introduction>
		<introduction title="自由控制">
			<t-count-down ref="tCountDowns"
						  class="r-10 mb-15 p-10 w-100% sta-c"
						  type="success">50000</t-count-down>
			<t-button class="mb-13"
					  type="primary"
					  @click="start">开始</t-button>
			<t-button class="mb-13"
					  type="error"
					  @click="pause">暂停</t-button>
			<t-button class="mb-13"
					  type="warning"
					  @click="continues">继续</t-button>
			<t-button class="mb-13"
					  type="success"
					  @click="stop">结束</t-button>
		</introduction>
		<introduction title="设置格式">
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  format="d天h时M分s秒">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="primary"
						  format="d天h时M分s秒">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="error"
						  format="d天h时M分s秒">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="warning"
						  format="d天h时M分s秒">50000</t-count-down>
			<t-count-down class="r-10 mb-15 p-10 w-100% sta-c"
						  type="success"
						  format="d天h时M分s秒">{{timers}}</t-count-down>
		</introduction>
	</view>
</template>
<script setup>
	const timers = ref<number>(50000)
	const tCountDowns = ref<ComponentPublicInstance | null>(null)
	function start() {
		tCountDowns.value?.$callMethod('start')
	}
	function pause() {
		tCountDowns.value?.$callMethod('pause')
	}
	function continues() {
		tCountDowns.value?.$callMethod('continues')
	}
	function stop() {
		tCountDowns.value?.$callMethod('stops')
	}
</script>

t-count-down Props

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

t-count-down Events

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

t-count-down Slots

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

t-count-down 组件介绍 ​

t-count-down 平台兼容 ​

t-count-down 基础用法 ​

t-count-down Props ​

t-count-down Events ​