更新记录

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）

增加前缀

平台兼容性

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

mryzr-timer Events