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

Vue组件：vue-count-to的使用与配置详解

最新推荐文章于 2024-03-26 09:55:36 发布

原创最新推荐文章于 2024-03-26 09:55:36 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了Vue轻量级组件vue-count-to的安装、使用方法及其属性配置。通过示例代码展示了如何在Vue项目中引入并使用该组件，同时提供了组件的关键属性如startVal、endVal、duration等的详细说明。此外，还提到了组件的挂载回调、控制方法如start、pause和reset。文章适用于前端开发者，特别是使用Vue.js进行项目开发的人群。

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	—