ThorUI文档

# tui-timer 计时器

介绍

计时器，毫秒使用css模拟替代js频繁更新操作。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiTimer from "@/components/thorui/tui-timer/tui-timer.vue"
export default {
	components:{
		tuiTimer
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-timer": "/components/thorui/tui-timer/tui-timer"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

展示毫秒，自动开始

通过 isMs 属性控制是否展示毫秒，maxTime 属性设置最大时间，到时间后自动停止计时。

<!--uni-app-->
<tui-timer  @end="end" :maxTime="30" isMs></tui-timer>

<!--微信小程序-->
<tui-timer  bindend="end" maxTime="{{30}}" isMs></tui-timer>
手动开始，手动结束

通过 start 属性控制是否自动开始计时，默认为true。传值false，则需要手动调用方法。

<!--uni-app-->
<tui-timer ref="timer" @end="end" isMs :start="false"></tui-timer>

<!--微信小程序-->
<tui-timer id="tui-timer" bindend="end" isMs start="{{false}}"></tui-timer>

//uni-app 方法调用
end(e){
	console.log(e)
	console.log(`计时结束，时间：${e.totalSeconds}s`)
},
//开始计时
startTiming(){
	this.$refs.timer.startTiming()
},
//重置计时
resetTimer(){
	this.$refs.timer.resetTimer()
},
//结束或暂停计时
endTimer(){
	this.$refs.timer.endTimer()
}

//微信小程序 方法调用
let timer;
Page({
  onReady: function (options) {
    timer = this.selectComponent("#tui-timer")
  },
  end(e){
    console.log(e)
	console.log(`计时结束，时间：${e.detail.totalSeconds}s`)
  },
  //开始计时
  startTiming(){
    timer.startTiming()
  },
  //重置计时
  resetTimer(){
    timer.resetTimer()
  },
  //结束或暂停计时
  endTimer(){
    timer.endTimer()
  }
})

# Slots

none

# Props

参数 类型 说明 默认值
width Number 数字框宽度 36
height Number 数字框高度 36
borderWidth Number 数字框边框宽度，单位rpx 0
borderColor String 数字框边框颜色 transparent
backgroundColor String 数字框背景颜色 transparent
size Number 数字框字体大小，单位rpx 32
color String 数字框字体颜色 #333
colonSize Number 冒号或文字大小，单位rpx 32
colonColor String 冒号或文字颜色 #333
value1.6.2 [Number,String] 初始时间（单位：秒） 0
maxTime Number 最大时间，大于等于最大时间则计时结束，为0则需要手动结束 (单位：秒) 0
isDays Boolean 是否显示天 false
isHours Boolean 是否显示小时 true
isMinutes Boolean 是否显示分钟 true
isSeconds Boolean 是否显示秒数 true
isMs Boolean 是否显示毫秒 false
msWidth Number 毫秒框宽度，单位rpx，为0时则为auto。 0
msSize Number 毫秒框字体大小，单位rpx 28
msColor String 毫秒框字体颜色 #333
isColon Boolean 时分秒是否展示为冒号，传值false则显示为文字 true
start Boolean 是否自动开始，传值false则需要手动调用方法 true

# Events

事件名 说明 回调参数
end 计时结束时触发 { day : 天 , hour : 时 , minute: 分 , second : 秒 , totalSeconds : 总秒数 }

# Methods

温馨提示：方法调用请看文档：【进阶用法 -> 组件实例方法】或者参考示例程序。

方法名 说明 传入参数
startTiming 开始计时 -
resetTimer 重置计时 -
endTimer 结束或暂停计时 -

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-table 表格 →