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

news2024/11/24 17:58:24

效果：

在这里插入图片描述

官网介绍

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 substitution
  enableScrollSpy?: 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()
})