Vue实现数字累加动画效果

最新推荐文章于 2025-02-25 14:42:50 发布

悠哉码农的日常

最新推荐文章于 2025-02-25 14:42:50 发布

阅读量2.9k

点赞数 3

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_40052237/article/details/109111855

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

新建一个NumberCounter.vue组件

<template>
<div class="number-grow-warp">
    <span ref="numberGrow" :data-time="time" class="number-grow">0</span>
</div>
</template>

<script>
export default {
    props: {
        time: {
            type: Number,
            default: 1
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {

        }
    },
    mounted() {
        this.numberGrow(this.$refs.numberGrow)
    },
    methods: {
        numberGrow(ele) {
            let step = parseInt((this.value) / (this.time * 100))
            let current = 0
            let start = 0
            let t = setInterval(() => {
                start += step + 10
                if (start >= this.value) {
                    clearInterval(t)
                    start = this.value
                    t = null
                }
                if (current === start) {
                    return
                }
                current = start
                ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
            }, 10)
        }
    },
}
</script>

调用：

<NumberCounter :value="1000" class="text-color-blue nums"></NumberCounter>