动态数字增长特效

1、需求：有些展示的数据是静态的，没有那么美观，就想着加点增长特效

2、思路：处理成一个组件，往里面传值的时候，会根据特效时长，特效间隔等逻辑处理并返回值

3、实现

<template>
    <span>{{ carrier }}</span>
</template>
<script>
export default {
    data() {
        return {
            carrier: 0,
            funcNum: null
        }
    },
    props: {
        num: {
            type: Number,
            default: 0
        },
        ms: {
            type: Number,
            default: 40
        },
        s: {
            type: Number,
            default: 2000
        }
    },
    watch: {
        num: function () {
            this.numChange()
        }
    },
    mounted() {
        this.numChange()
    },
    methods: {
        numChange() {
            if (this.ms < Math.abs(this.num)) {
                let add = Math.round(this.num / this.ms)
                let intervalTime = this.s / this.ms
                let _this = this
                this.funcNum = setInterval(() => {
                    _this.carrier += add
                }, intervalTime)
                setTimeout(() => {
                    clearInterval(_this.funcNum)
                }, this.s)
            } else {
                this.carrier = this.num
            }
        }
    }
}
</script>
<style lang="scss" scoped></style>

引入

import rollNum from '@/components/rollNum.vue'
export default {
    components: {
        rollNum
    },
}

使用

<rollNum :num="num" />

4、效果