组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
time | Number | 10*1000 | 单位毫秒,倒计时的总时长 |
format | String | "DD天HH小时MM分SS秒MS毫秒" | 格式。如果只想要秒:SS秒 |
autoStart | Boolean | true | 是否自动开始倒计时 |
color | String | "" | 文字颜色 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
@start | 开始或者继续。 | ||
@end | 停止,直接结束。 | ||
@change | 时间变化时触发。 |
🌽 slot插槽
属性名称 | 类型 | 数据 | 说明 |
---|---|---|---|
default | timeData | 数据 | 倒计时数据 |
timeData结构如下
ts
{
data:time_data,//时间数据
finish:isfinish //是否完成计时。
}
//时间数据time_data的结构
{
day:,//天
hour:,//小时,
minutes:,//分.
seconds:,//秒。
millisecond:,//毫秒
}
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
resinit | 重置倒计时,从头开始算起 | ||
start | 开始/继续 | ||
pause | 暂停 | ||
stop | 停止直接结束 |
贡献者
Mr.童