二次封装countUp.js

注解：这是一个数字展示组件

一.官网链接：countUp.js (opens new window)

二. 封装后的效果以及原vue代码

<template>
    <div>
        <ClientOnly>
            <slot name="before"></slot>
            <span ref="countUp"></span>
        </ClientOnly>
    </div>
</template>

<script>
export default {
    name: "CountUp",
    props: {
       startVal: {
           type: Number,
           default: 0,
       },
       endVal: {
           type: Number,
           required: true
       },
       decimalPlaces: {
           type: Number,
           default: 0
       },
        duration: {
            type: Number,
            default: 2
        },
        delay: {
            type: Number,
            default: 0
        }
    },
    data(){
        return{
           counter: null
        }
    },
    mounted(){
       this.init()
    },
    beforeDestroy(){
       this.counter.reset();
       this.counter = null;
    },
    methods:{
        init(){
            import("countup.js").then(module => {
                this.$nextTick(() => {
                   this.counter = new module.CountUp(this.$refs.countUp,this.endVal,{
                       startVal: this.startVal,
                       decimalPlaces: this.decimalPlaces,
                       duration: this.duration
                   } )
                });

                setTimeout(() => {
                    this.counter.start();
                },this.delay)
            })
        }
    }

}
</script>

<style>

</style>

2. 在本项目任何一个.md文件写出下面的标签即可使用

 <CountUp :endVal='2020'/>

3. 可传参数：

• 必选项：

1. endVal ： 结尾数字（即从0加载到这个数字）必选项

• 可选项：

2. startVal ：开始数字（即从这个数字倒数为0）
3. decimalPlaces ：精确度（小数点后几位）
4. duration： 数字加载完成时间,1表示1s
5. delay：组件开始渲染时间，1000表示1s