你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

展示组件

倒计时器 TmCountdown

倒计时，可以精确到秒，毫秒

🌶️ 示例

查看模拟效果－

示例模板

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-8">倒计时 tmCountdown</tm-text>
			<tm-text  color="#999999" >倒计时，可以精确到秒，毫秒，尽量通过插槽来布局样式。</tm-text>
		</tm-sheet>
		<tm-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<tm-countdown font-size="40" color="primary" :time="1000*59" v-model:actions="actions"></tm-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-n8">
				<tm-button width="26%" @click="actions = 'play'">开始</tm-button>
				<tm-button width="26%" @click="actions = 'pause'" class="mx-20">暂停</tm-button>
				<tm-button width="26%" @click="actions = 'reset'">重置</tm-button>
			</view>
		</tm-sheet>
		
		<tm-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<tm-countdown  font-size="40" color="error" unit="ms" format="SS:MS" :time="1000*5" v-model:actions="actions2"></tm-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-n8">
				<tm-button width="26%" @click="actions2 = 'play'">开始</tm-button>
				<tm-button width="26%" @click="actions2 = 'pause'" class="mx-20">暂停</tm-button>
				<tm-button width="26%" @click="actions2 = 'reset'">重置</tm-button>
			</view>
		</tm-sheet>
</view>
</template>

<script>
	export default {
		data() {
			return {
				actions:"",
				actions2:"",
			};
		}
	}
</script>

<style lang="scss">

</style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
time	number	0	-
actions	union	""	-
format	string	"DD天HH时MM分SS秒"	-
autoStart	boolean	false	-
unit	union	"ss"	-
fontSize	string	"16"	-
color	string	"#333333"	-
captcha	boolean	false	是否使用验证码模式启用后,整个应用不管你用了多少个此组件,倒计时都是共用的直到结束某一个结束,其它的才可以启用,这样可以保证,任何时候切换页面验证发送都能保证在60秒内的间隔,防止刷验证码.

🌹 事件

事件名	参数	返回数据	描述
change	-	-	-
pause	-	-	-
start	-	-	-
complete	-	-	-

🌽 slot插槽

插槽名	数据	描述
default	名称：binding,status 类型：-
名称：binding,time 类型：-
名称：binding,label 类型：-
名称：binding,ms 类型：-
名称：binding,ss 类型：-
名称：binding,mm 类型：-
名称：binding,hh 类型：-
名称：binding,dd 类型：-
插槽

🥗 ref方法

方法名	参数	返回值	描述
start	-	-	开始计时
pause	-	-	暂停计时
reset	-	-	重置
getStatus	-	-	获取当前状态