[JavaScript知识库]【vue】vue-count-to数字滚动插件

vue-count-to是一个数字滚动插件
npm install vue-count-to

新建一个子组件 count.vue

<template>
    <div>
        <countTo  :start-val="start" :end-val="num" :duration="dTime" class="text-style" :decimals="decimalsNum" :separator="null"></countTo>
    </div>
</template>

<script>
    import countTo from 'vue-count-to';
    export default {
        name: "count",
        props:{
            start:{
                type:Number, //开始值
                default:100,
            },
            num:{
                type:Number,  //结束值
                default:1000
            },
            dTime:{
                type:Number,  //持续时间
                default: 2000
            },
            decimalsNum:{
                type:Number,  //要显示的小数位数
                default:0
            }
        },
        components: { countTo }
    }
</script>

<style scoped>
.text-style{
    font-family: PingFangSC-Regular;
    font-size: 42px;
    color: #FD591A;
    line-height: 34px;
    font-weight: 400;
}
</style>

在父组件使用的时候

<num class="num" :num="xxx" :decimalsNum="2"></num>