本文目的：練習(xí)在vue中订歪，基于第三方CountUp.js，封裝一個(gè)計(jì)數(shù)器組件

countUp.js簡介

countUp.js是一個(gè)由js實(shí)現(xiàn)的擁有漸變效果的計(jì)數(shù)器

countUp.js地址 http://inorganik.github.io/countUp.js/

image

countUp.js各參數(shù)含義如下：

組件化封裝

好了開始封裝年局，步驟如下：

第一步 引入依賴

引入countup.js

package-lock.json

    "countup": {
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/countup/-/countup-1.8.2.tgz",
      "integrity": "sha1-AhzMam+WRUDGsn7WRoGvJ/tV8BA="
    }

package.json

  "dependencies": {
    "core-js": "^3.4.3",
    "countup": "^1.8.2",
    "element-ui": "^2.13.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  }

第二步 組件封裝

count-to.vue 封裝組件文件

<template>
    <div>
        <slot name="left"></slot>
        <span ref="number" :id="countId" :class="getClass"></span>
        <slot name="right"></slot>
    </div>
</template>
<script>
    import CountUp from "countup";
    export default {
        name: "CountTo",
        computed: {
            countId() {
                return `count_up_${this.uid}`;
            },
            getClass() {
                return this.className
            }
        },
        data() {
            return {
                counter: {}
            };
        },
        props: {
            /**
             * @description 起始值
             */
            startVal: {
                type: Number,
                default: 0
            },
            /**
             * @description 起始值
             */
            endVal: {
                type: Number,
                required: true
            },
            /**
             * @description 小數(shù)點(diǎn)后保留位數(shù)
             */
            decimals: {
                type: Number,
                default: 0
            },
            /**
             * @description 動(dòng)畫延遲開始時(shí)間
             */
            delay: {
                type: Number,
                default: 0
            },
            /**
             * @description 漸變時(shí)長
             */
            duration: {
                type: Number,
                default: 1
            },
            /**
             * @description 是否使用變速效果
             */
            useEasing: {
                type: Boolean,
                default: false
            },
            /**
             * @description 是否分組顯示
             */
            useGroup: {
                type: Boolean,
                default: true
            },
            /**
             * @description 分組顯示的分隔符
             */
            separator: {
                type: String,
                default: ","
            },
            /**
             * @description 整數(shù)部分和小數(shù)的分隔符
             */
            decimal: {
                type: String,
                default: "."
            },
            className: {
                type: String,
                default: ''
            }
        },
        methods: {
            getCount() {
                return this.$refs.number.innerHTML
            }
        },
        watch: {
            /**
             * @description 監(jiān)控endVal值變化际看，調(diào)用update方法
             */
            endVal(newVal, oldVal) {
                this.counter.update(newVal)
            }
        },
        mounted() {
            /**
             * @description 基于上述參數(shù)，初始化一個(gè)counter實(shí)例
             */
            this.$nextTick(() => {
                this.counter = new CountUp(this.countId, this.startVal, this.endVal, this.decimals, this
                    .duration, {
                        useEasing: this.useEasing,
                        useGroup: this.useGroup,
                        separator: this.separator,
                        decimal: this.decimal
                    })
                setTimeout(() => {
                    this.counter.start()

                }, this.delay)
            })
        }
    };
</script>

index.js

import CountTo from "./count-to.vue"
export default CountTo

第三步演示

新建countToDemo.vue用于演示矢否，內(nèi)容如下：

<template>
    <div class="count_class">
        <count-to ref="countTo" :end-val="endVal" :className="getClass">
            <span slot="left" class="prefix-style">總金額： </span>
            <span slot="right"> 元</span>
        </count-to>
        <br>
        <el-button type="primary" round @click="getNumber">獲取數(shù)值</el-button>
        <el-button type="primary" round @click="updateVal">更新值</el-button>
    </div>
</template>
<script>
    import CountTo from '@/components/count-to'
    export default {
        name: "count_to",
        components: {
            CountTo
        },
        data() {
            return {
                endVal: 1000
            }
        },
        computed: {
            // 返回自定義樣式
            getClass() {
                return ['count-to-number']
            }
        },
        methods: {
            getNumber() {
                let number = this.$refs.countTo.getCount();
                this.$message({
                    message: '當(dāng)前數(shù)值為：' + number,
                    type: 'success'
                });
                console.log(number);
            },
            updateVal() {
                this.endVal += Math.random() * 100
            }

        }
    }
</script>
<style>
    .count_class {
        margin-top: 50px;
    }

    .count-to-number {
        font-size: 8em;
        color: #4d63bc;
        font-weight: 300;
    }

    .prefix-style {
        font-size: 2em;
    }
</style>

修改路由仲闽，添加如下內(nèi)容

  {
    path: '/count',
    name: 'count',
    component: () => import('../views/countToDemo')
  }

demo目錄如下：

image

image

npm run serve 啟動(dòng)項(xiàng)目

image

!