TMUI 3.1.09
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

倒计时 Countdown ​

常用于计时，短信验证码倒计时，活动倒计时等。

🌶️ 倒计时 Countdown 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,默认是精确到毫秒级"></tm-text>
			<tm-divider></tm-divider>
			<view>
				<tm-countdown ref="cu" :autoStart="false"></tm-countdown>
			</view>
			<view class="mt-32 flex flex-row flex-around">
				<tm-button @click="actions('resinit')" size="small" label="重置"></tm-button>
				<tm-button @click="actions('start')" size="small" :width="140" :font-size="22" label="开始/继续"
					color="green"></tm-button>
				<tm-button @click="actions('pause')" size="small" label="暂停" color="orange"></tm-button>
				<tm-button @click="actions('stop')" size="small" label="结束" color="red"></tm-button>
			</view>
		</tm-sheet>

		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="useTimer,使用useHooks来自定布局或者定时等更加的自由"></tm-text>
			<tm-divider></tm-divider>
			<view class="py-32">
				{{formattedTime()}}
			</view>
			<tm-button @click="cafn" size="small" block :font-size="22" :label="status==1?'暂停':'开始'"
				:color="status==1?'red':'primary'"></tm-button>
		</tm-sheet>

	</tm-app>
</template>
<script lang="ts" setup>
	import { ref, getCurrentInstance } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import tmApp from '@/tmui/components/tm-app/tm-app.vue'
	import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
	import tmText from '@/tmui/components/tm-text/tm-text.vue'
	import tmCountdown from '@/tmui/components/tm-countdown/tm-countdown.vue'
	import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
	import tmButton from '@/tmui/components/tm-button/tm-button.vue'
	import { useTimer } from '@/tmui/tool/useFun/useTimer'
	const cu = ref<InstanceType<typeof tmCountdown> | null>(null)

	const { start, stop, formattedTime, status, restart, timeObj, times, change } = useTimer({ totalTime: 10 * 1000, unit: 'ms', format: 'dd天hh时mm分ss秒ms毫秒' });
	function actions(fun : string) {
		cu.value[fun]()
	}
	function cafn() {
		if (status.value == 1) {
			stop();
		} else {
			restart();
		}
	}
	change((n) => {
		// console.log(n)
	})
</script>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
timeNumber10*1000单位毫秒，倒计时的总时长
formatString"DD天HH小时MM分SS秒MS毫秒"格式。如果只想要秒：SS秒，注意如果当你的formatType设定某值时，里面只能读取到你设定的值。
autoStartBooleantrue是否自动开始倒计时
colorString""文字颜色
formatType```"DD""HH""MM"
formatType解释
  • 到计时格式的类型，设定下面的值时，倒计时功能不会进位，而是以指定的值进行倒计时。
  • 比如分，你设置为MM,那么你到计时如果是200分钟，就从200开始倒计时。而不会进位到小时。
  • "DD"|"HH"|"MM"|"SS"|"MS"|""
  • 天|时|分|秒|毫秒

🌹 事件 ​

事件名参数返回数据描述
@start开始或者继续。
@end停止，直接结束。
@change时间变化时触发。

🌽 slot插槽 ​

属性名称类型数据说明
defaulttimeData数据倒计时数据

timeData结构如下 ​

ts
{
	data:time_data,//时间数据
	finish:isfinish //是否完成计时。
}
//时间数据time_data的结构
{
	day:,//天
	hour:,//小时,
	minutes:,//分.
	seconds:,//秒。
	millisecond:,//毫秒
}

🥗 ref方法 ​

方法名参数返回值描述
resinit重置倒计时，从头开始算起
start开始/继续
pause暂停
stop停止直接结束

贡献者 ​

Mr.童