npm 插件滚动数字组件 vue-count-to

1 vue-countTo 是一个无依赖的轻量级 vue 组件，可以自己覆盖 easingFn。

您可以设置 startVal 和 endVal ，它会自动判断向上或向下计数。它支持 vue-ssr。它是从 countUp.js 学习的；

2 进入正题，安装使用vue项目中为例，个人使用的组件

npm install vue-count-to

3 引入并组件化使用

<template>
    <div class="container">
        <div class="container-box">
            <ul class="head-list">
                <li class="header-li"
                    v-for="(item, key) in customData"
                    :key="key">
                    <div class="head__item-content">
                        <span v-if="!item.desc">
                            <count-to :start-val="0"
                                      :end-val="Number(item.endVal)"
                                      :duration="1500"
                                      :decimals="item.decimals"
                                      class="card-panel-num" />
                        </span>
                        <span v-else>
                            {{item.endVal}}
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>


    import CountTo from "vue-count-to";
    export default {
        components: {
            CountTo
        },
        data: () => {
            return {

                total: 0,
                customData: [{
                    name: "订单总笔数",
                    endVal: 0,
                    desc: false,
                    decimals: 0, // 要显示小数的位数
                },
                {
                    name: "学科总数",
                    desc: false,
                    endVal: 0,
                    decimals: 0,
                },
                {
                    name: "订单总金额",
                    endVal: 0,
                    desc: false,
                    decimals: 2,
                },],

            }
        },

        props: ['data', 'type'],
        // 滚动数据

        watch: {
            data: function (val) {
                this.customData[0].endVal = val.total;
                this.customData[1].endVal = val.sold;
                this.customData[2].endVal = val.price;
            }
        },
        methods: {


        }



    }
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        &-box {
            width: calc(100%);
            /deep/ .el-divider {
                background-color: #f6f6f6;
            }
            h3 {
                font-size: 16px;
                color: #262626;
            }

            .head-list {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 0;
                .header-li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex: 33%;
                    position: relative;
                    padding-right: 80px;
                }
            }
        }
    }
</style>

4 count-to属性配置 

属性	描述	类型	默认值
startVal       起始值	想要开始的值	Number	0
endVal        结束值	要达到的价值	Number	2017
duration       期间	持续时间（毫秒）	Number	3000
autoplay     自动播放	挂载时自动播放	Boolean	true
decimals    小数点	要显示的小数位数	Number	0
decimal      十进制	拆分小数	String	.
separator    分隔器	分隔符	String	,
prefix	前缀	String	''
suffix	后缀	String	''
useEasing	是使用缓动功能	Boolean	true
easingFn	缓动函数	Function	—

** 注意：当 autoplay:true 时，startVal 或 endVal 改变时会自动启动 **

职能

函数名称	描述
mountedCallback	挂载时会发出mountedCallback
start	开始计数
pause	暂停 countTo
reset	重置countTo