更新记录
2.0.0(2022-08-10) 下载此版本
增加v-model属性,可双向绑定计数器数值。
1.4.0(2022-08-04) 下载此版本
增加格式化方法format
1.3.0(2022-08-04) 下载此版本
1.0.0(2022-08-01)
计数器初始化
1.1.0(2022-08-02)
增加天,时,分,秒转换
1.2.0(2022-08-02)
增加测试按钮,增加前缀,监听返回秒数
1.3.0(2022-08-02)
增加前缀
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
mryzr-timer
- 计时器插件-------示例:【计时器:5天15:55:55】
- 不定期优化组件
- QQ:987212198
安装方式
本组件符合的 easycom 规范,导入可直接使用。
温馨提示:
HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
基本用法
在 template
中使用组件
<template>
<view class="container">
<mryzr-timer ref="timer" v-model="timeCount" :testButton="false" :auto="auto" format="day天【HH:mm:ss】" @callbackTimeCode="callbackTimeCode" ></mryzr-timer>
<view>
<button type="default" @click="reset">重置计时器</button>
<button type="default" @click="start">开启计时器</button>
<button type="default" @click="clear">停止计时器</button>
<button type="default" @click="getTime">获取当前计时秒</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
auto: false,
timeCount: 3
}
},
methods: {
reset(){
//重置计时器
this.$refs.timer.reset()
},
start(){
//开启计时器
this.$refs.timer.start()
},
clear(){
//停止计时器
this.$refs.timer.clear()
},
getTime(){
//监听计时器的秒数
let timeCount = this.$refs.timer.getTimeCount();
console.log(timeCount);
}
}
}
</script>
API
mryzr-timer Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | Number | 0 | 双向绑定计数器计数秒值 |
testButton | Boolean | false | 是否开启测试按钮 |
auto | Boolean | true | 是否初始化开启计时器 |
format | String | day天HH:mm:ss | 计时器输出格式【day天,HH小时,mm分钟,ss秒】 |
mryzr-timer Events
事件名 | 说明 | 返回值 |
---|---|---|
@reset | 重置定时器事件(refs方式调用) | 无 |
@start | 开启计时器事件(refs方式调用) | 无 |
@clear | 暂停计时器事件(refs方式调用) | 无 |