CountUp.js 实现数字增长动画 Vue

效果：

官网介绍

1. 安装

npm install --save countup.js

2. 基本使用

// template
<span ref="number1Ref"></span>// script
const number1Ref = ref<HTMLElement>()
onMounted(() => {new CountUp(number1Ref.value!, 9999999).start()
})

3. 参数

new CountUp(参数一, 参数二, option)
// 源码：CountUp类的构造函数，前两个参数必传，第三个参数为可选
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);

• 参数一: 数字所在容器
• 参数二: 数字的最终值
• option：更多配置项（可选）

// 括号内为默认值
interface CountUpOptions {startVal?: number; // 开始数字 (0)decimalPlaces?: number; // 小数位数 (0)duration?: number; // 动画时间：秒 (2)useGrouping?: boolean; // ，的位置。示例: 1,000 vs 1000 (true)useIndianSeparators?: boolean; // ，的位置。示例: 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; // 分隔符 (',')decimal?: string; // 小数点 ('.')// easingFn: easing function for animation (easeOutExpo)easingFn?: (t: number, b: number, c: number, d: number) => number;formattingFn?: (n: number) => string; // 格式化为字符串prefix?: string; // 在结果前面添加字符suffix?: string; // 在结果后面添加字符numerals?: string[]; // 数字替换。numeral glyph substitutionenableScrollSpy?: boolean; // 当视图可见时开始动画scrollSpyDelay?: number; // 视图可见后，延迟多久（单位：ms）开始动画scrollSpyOnce?: boolean; // 只运行一次onCompleteCallback?: () => any; // 动画完成后的回调函数onStartCallback?: () => any; // 动画开始时的回调函数plugin?: CountUpPlugin; // 插入CountUp动画
}

4. 示例

const option = {duration: 5,	// 动画持续时间5秒prefix: '￥'	// 在结果加前缀字符 ￥
}
onMounted(() => {new CountUp(number1Ref.value!, 9999999, option).start()
})

参考文章：CountUp.js( 轻量级数字动画插件 )原文链接