更新记录

1.0.7（2024-01-18）

更新示例代码默认时间为0看不到效果的问题

1.0.6（2023-12-04）

解决暂停继续后有1s延迟，导致动画不流畅的问题，使用毫秒级渲染动画和倒计时，使组件使用更加丝滑。觉得好用麻烦收藏支持一下，有任何问题或者需求加ZhangHaoqwezxc，我尽量解决

1.0.5（2023-09-11）

优化

平台兼容性

使用说明

注册组件后直接使用，支持自定义内容。

使用方式

import countDown from '@/components/zh-countDown/countDown/countDown.vue'

在页面中使用组件

import countDown from '@/components/countDown/countDown.vue'

<countDown ref="down" :widths='300' :breadth='30' activeColor='#01B862' defaultColor='#EDF0F0' isScale  :times='times' @endTime='endTime'>
  <view>自定义内容</view>
</countDown>

把动画放到App.vue就支持app和h5
@keyframes progross1 {
    to {
        transform: rotate(360deg);
    }
}
@keyframes progross2 {
    to {
        transform: rotate(0deg);
    }
}

参数说明

示例

<template>
    <view class="">
        <view class="nav" style="display: flex;justify-content: center;">
            <countDown ref="down" :widths='300' :breadth='40' activeColor='#01B862' defaultColor='#EDF0F0'
                :times.sync='times' @endTime='endTime' @pauseNum='pauseNum'>
                <view class="" style="font-size: 26upx;color: #333;">自定义内容{{(times/1000).toFixed(0)}}</view>
            </countDown>
        </view>

        <view class="btn">
            <view class="btna" @click="startCounting">
                <view class="btn_name">开始</view>
            </view>

            <view class="btna" @click="pause">
                <view class="btn_name">暂停</view>
            </view>

            <view class="btna" @click="goOn">
                <view class="btn_name">继续</view>
            </view>

            <view class="btna" @click="getReset">
                <view class="btn_name">重置</view>
            </view>
        </view>

        <view class="">
            <u-toast ref="uToast"></u-toast>
        </view>
    </view>
</template>

<script>
    import countDown from '@/components/zh-countDown/countDown/countDown.vue'
    export default {
        components: {
            countDown
        },
        data() {
            return {
                times: 10000,
            }
        },
        methods: {
            startCounting() { //开始事件
                this.times = 10000
                this.$refs.down.start()
            },
            pause() { //暂停
                this.$refs.down.pause()
            },
            pauseNum(e){ //暂停时返回剩余时间
                console.log('剩余时间：',e);
            },
            goOn(){ //继续
                this.$refs.down.goOn()
            },
            endTime() { //结束
                console.log('结束');
            },
            getReset() { //重置
                this.$refs.down.reset()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .nav {
        margin: 146upx 0 200upx 0;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .btna {
            width: 160upx;
            height: 64upx;
            background: #06D368;
            border-radius: 50upx;
            display: flex;
            justify-content: center;
            align-items: center;

            .btn_name {
                font-size: 32upx;
                font-weight: 600;
                color: #FFFFFF;
            }
        }
    }
</style>