效果:

在这里插入图片描述

官网介绍

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()
})

在这里插入图片描述

原文链接

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部