更新记录

v-1.1（2022-07-02） 下载此版本

添加hour、minute、second等属性，实现动态赋值

v-1.0（2022-04-12） 下载此版本

上架，可以广泛使用

平台兼容性

bing-countup

![github]

一个轻量级计时器插件

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

示例

在 template 中使用组件

<template>
    <view class="container">
        <!-- 一般用法 -->
        <bing-countup />

        <!-- 一般用法 设置时间-->
        <bing-countup :hour="1" :minute="12" :second="40" />

        <!-- 不显示小时 设置 show-hour = false 不显示小时 -->
        <bing-countup :show-hour="false" :hour="1" :minute="12" :second="12" />

        <!-- 文字分隔符 设置 show-colon 属性设置分隔符样式-->
        <bing-countup :show-colon="false" />

        <!-- 修改颜色 设置 color \ background 属性设置组件颜色-->
        <bing-countup color="#FFFFFF" background-color="#007AFF" />

        <!-- 修改字体大小 设置 font-size 属性设置组件大小-->
        <bing-countup :font-size="30" />
        <!-- 修改颜色 + 字体大小 -->

        <bing-countup :font-size="30" color="#FFFFFF" background-color="#007AFF" />
        <!-- 自由控制开始/暂停 设置 auto-start 属性控制是否自动开启-->

        <bing-countup :auto-start="false" />

        <!-- 倒计时回调事件  autostart 使用默认值 :auto-start="true" 重置计时器立即开始 ->
        <!-- :auto-start="false" 重置计时器，等再点击开始的时候，计时器开始-->
        <!-- :show-hour="false" 不显示小时 -->
        <bing-countup ref="countUp"  :show-hour="false" @change="onChange" />
        <view style="display: flex;">
            <button type="primary" size="mini" @click="reset">重置</button>
            <button type="primary" size="mini" @click="start">开始</button>
            <button type="primary" size="mini" @click="pause">暂停</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {
            //开始
            start() {
                this.$refs.countUp.start();
            },
            // 暂停
            pause() {
                this.$refs.countUp.pause();
            },
            // 重置
            reset() {
                this.$refs.countUp.reset();
            },
            onChange(e) {
                this.timeData = e;
                //console.log(e);
            }
        }
    }
</script>

如果需要引用，可以使用以下方式

<script>
    import BingCountup from "@/components/bing-countup/bing-countup.vue"
    export default {
        components: {
            'bing-countup': BingCountup
        }
    }
</script>

注： 为确认是否启用bing-countup组件及事件，默认有一些console.log()提示，如果不需要提示，可以打开bing-countup.vue把所有的console.log()提示信息都删了。

API

bing-countup @property

bing-countup @event

鸣谢

开发做题系统，没有一款满意的计时器组件，一般来说，都是倒计时组件，本来想引用smh-timer这个组件，但是不显示小时，在此和u-count-down基础上开发出来的，有什么问题希望大家留言~，若有时间，会整合一下，倒计时，这样倒计时和计时器一个组件就可以了