Skip to content
On this page

组件库文档 tmui.design

倒计时 Countdown

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


🌶️ 倒计时 Countdown 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-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-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"
const cu = ref<InstanceType<typeof tmCountdown> | null>(null)
function actions(fun:string){
   cu.value[fun]();
}
</script>

🌶️ 兼容性

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

🌱 参数

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

参数名类型默认值描述
timeNumber10*1000单位毫秒,倒计时的总时长
formatString"DD天HH小时MM分SS秒MS毫秒"格式。如果只想要秒:SS秒
autoStartBooleantrue是否自动开始倒计时
colorString""文字颜色

🌹 事件

事件名参数返回数据描述
@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.童