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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		
 	}
 },
 methods: {
 	end(e){
 		console.log(e)
 		console.log(`计时结束，时间：${e.totalSeconds}s`)
 	}
 }
}

<!--微信小程序-->
<tui-timer  bindend="end" maxTime="{{30}}" isMs></tui-timer>

// data 数据 及 方法
Page({
  data: {
    
  },
  end(e){
 	console.log(e)
 	console.log(`计时结束，时间：${e.detail.totalSeconds}s`)
  }
})

// Make sure to add code blocks to your code group

手动开始，手动结束

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

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

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

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

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

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

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

注：uni-app端绑定事件使用@前缀，如@end；微信小程序原生使用bind前缀，如bindend

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

Methods

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

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

预览

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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