数字动画滚动vue-count-to插件

安装插件：

vue2：npm install vue-count-to
vue3：npm install vue3-count-to

示例（vue2与vue3只有插件的区别，使用方法一样，数字动画写成一个组件，使用时直接引入组件即可）：

<!-- 数字动画组件 -->
<template>
    <span>
        <countTo class="num" :id="id" :ref="id" :startVal="0" :endVal="Number(num)" :duration="2000" :decimals="isDot(num)" prefix="" :suffix="suffix"  ></countTo>
    </span>
</template>

<script>
import countTo from 'vue-count-to'; //引入插件
import countTo from 'vue3-count-to'; //vue3引入插件
export default {
    props: {
        id:{
            type:[String],
            default:'num',
        },
        num:{
            type:[String,Number],
            default:0,
        },
        suffix:{
            type:[String],
            default:'',
        }
    },
    data() {
        return {
            
        };
    },
    components: {
        countTo,
    },
    watch: {
        loop:{
            handler(newVal){
                try {
                    this.$refs[this.id].start();
                } catch (error) {
                    
                }
            },  
            deep:true
        }
    },
    inject:['loop'],
    mounted() {
       
    },
    beforeDestroy() {

    },
    methods: {
        isDot(num) {
            if(num){
                var nums =typeof num == 'string'?num:num.toString();
            }else{
                var nums = '0';
            }
            var result = nums.includes('.');
            if (result) {
                var decim = nums.split('.');
                return decim[decim.length - 1].length; //返回小数点后几位的length
            } else {
                return 0; //整数
            }
        },

    },
};
</script>
<style scoped lang="scss">
</style>

组件使用：

<template>
    <div>
        <numAnimation :num="gamePoint" :suffix="'%'"></numAnimation>
    </div>
</template>

<script>
    import numAnimation from '@/components/numAnimation.vue';
    export default {
        data() {
            return {
                gamePoint: 10,
            }
        },
        components:{
            numAnimation
        }
    }
</script>

配置项：

参数	说明	示例
startVal	开始值	0
endVal	结束值	--
duration	持续时间以毫秒为单位	3000
autoplay	自动播放	true
decimals	要显示的小数位数	0
decimal	十进制分割
separator	分隔符	，
prefix	前缀	"
suffix	后缀	"
useEasing	使用缓和功能	true
easingFn	缓和回调