1. 安装

npm i countup.js

2. 参数

项目	Value
target	string, HTMLElement ,HTMLInputElement - id of html element, input, svg text element, or DOM element reference where counting occurs
endVal	number - 最终数字
options?	object选项对象

options 包含属性

{startVal?: number; // number to start at (0)decimalPlaces?: number; // number of decimal places (0)duration?: number; // animation duration in seconds (2)useGrouping?: boolean; // example: 1,000 vs 1000 (true)useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)useEasing?: boolean; // ease animation (true)smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)separator?: string; // grouping separator (',')decimal?: string; // decimal ('.')// easingFn: easing function for animation (easeOutExpo)easingFn?: (t: number, b: number, c: number, d: number) => number;formattingFn?: (n: number) => string; // this function formats resultprefix?: string; // text prepended to resultsuffix?: string; // text appended to resultnumerals?: string[]; // numeral glyph substitutionenableScrollSpy?: boolean; // start animation when target is in viewscrollSpyDelay?: number; // delay (ms) after target comes into viewscrollSpyOnce?: boolean; // run only onceonCompleteCallback?: () => any; // gets called when animation completesplugin?: CountUpPlugin; // for alternate animations
}

3. Vue组件封装

3.1 组件代码

<template><span ref="count" id="countupId" />
</template><script>
import { CountUp } from 'countup.js'
const defaultOptions = {startVal: 0,decimalPlaces: 2,duration: 1, useGrouping: true,useEasing: true, smartEasingThreshold: 999, smartEasingAmount: 333, // amount to be eased for numbers above threshold (333)separator: ',',decimal: '.' ,// decimal ('.')
}
export default {name: 'CountUp',props: {// 起始值endVal: {type: Number,default: 0},options: {type: Object,default: () => { }}},watch: {endVal() {if (this.$refs.count) {this.initCountUp()}}},mounted() {this.initCountUp()},methods: {initCountUp() {const coutOptions = Object.assign({}, defaultOptions, this.options)const countUp = new CountUp(this.$refs.count, this.endVal, coutOptions)countUp.start()}}
}
</script>

3.2 调用方式

• 引入组件

import countUp from "@/components/numberAnimate";

• 注册组件

 components: {countUp},

• 使用组件

<count-up :end-val="Number(endVal)"/>