Timer 计时器

概述

Timer 计时器，可累加计时。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiTimer from "@/components/firstui/fui-timer/fui-timer.vue"
export default {
	components:{
		fuiTimer
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 maxTime 属性设置最大时间，@end 为计时结束事件。

<fui-timer :maxTime="20" @end="end"></fui-timer>

methods: {
	end(e) {
		console.log(e)
		this.fui.toast(`计时结束，时间：${e.totalSeconds}s`)
	}
}

手动控制

通过 isMs 属性设置显示文本，autoStart 属性设置是否自动开始计时。

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<fui-timer isMs :autoStart="false" ref="timer" @end="end"></fui-timer>

methods: {
	//开始计时
	startTiming(e) {
		this.$refs.timer.startTiming()
	},
	//结束计时
	endTimer(){
		this.$refs.timer.endTimer()
	},
	//重置计时
	resetTimer(){
		this.$refs.timer.resetTimer()
	}
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	计时器数字框宽度，单位rpx，不包含毫秒数字框	40	-
height	Number, String	计时器数字框高度，单位rpx	40	-
borderWidth	Number, String	数字框边框宽度，单位rpx	0	-
borderColor	String	数字框边框颜色	transparent	-
background	String	数字框背景颜色	transparent	-
size	Number, String	数字框字体大小，单位rpx	32	-
color	String	数字框字体颜色	#333	-
colonSize	Number, String	冒号或文字大小，单位rpx	32	-
colonColor	String	冒号或文字颜色	#333	-
value	Number, String	初始时间，单位秒（s）	#333	-
maxTime	Number, String	最大计时时间，为0则需要手动结束计时 ，单位秒（s）	0	-
isDays	Boolean	是否显示天	false	-
isHours	Boolean	是否显示小时	true	-
isMinutes	Boolean	是否显示分钟	true	-
isSeconds	Boolean	是否显示秒数	true	-
isMs	Boolean	是否显示毫秒	false	-
msWidth	Number, String	毫秒数字框宽度，单位rpx，为0则自适应宽度	0	-
msSize	Number, String	毫秒数字框字体大小，单位rpx	28	-
msColor	String	毫秒数字框字体颜色，为空则使用 color 属性值	-	-
isColon	Boolean	时分秒是否展示为冒号,为false时显示为文字	true	-
autoStart	Boolean	是否自动开始计时	true	-

Events

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

Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

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

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)