【工具】CountUp.js

作用:实现数字的动画展示效果


使用步骤:

  1. 安装

    复制代码
    npm i countup.js
  2. 导入

    复制代码
    import { CountUp } from 'countUps';
  3. HTML结构

    复制代码
    <span ref="countup1Ref">{{ props.number1 }}</span>
    <span ref="countup2Ref">{{ props.number2 }}</span>
  4. 创建实例

    复制代码
    const countup1Ref = ref<HTMLElement>();
    const countup2Ref = ref<HTMLElement>();
    onMounted(() => {
      const countup1 = new CountUp(countup1Ref.value!, props.number1, {
        duration: 2, //* 持续时间
      });
      countup1.start();
      const countup2 = new CountUp(countup2Ref.value!, props.number2, {
        duration: 2, //* 持续时间
      });
      countup1.start();
      countup2.start();
    });
相关推荐
昂好的day5 小时前
VisionMaster(VM) 标定工具详解(上):为什么必须标定 + 九点标定手眼标定
开发语言·数码相机·c#
严谨的麻辣烫5 小时前
静态代理 IP 的出口一致性如何验证?Python 请求检测与异常排查
开发语言·python·http·网络安全
迷途小羔羊5 小时前
项目概述
java·javascript·后端
原子延迟5 小时前
视频太大怎么压缩发微信?先查限制再压的3种方法(2026)
开发语言·图像处理·人工智能·计算机视觉·音视频
迷迭绿5 小时前
Cesium 轨迹回放播放器
前端·javascript·cesium
FITA阿泽要努力6 小时前
Fork Agent:共享上下文的艺术
开发语言·python·agent
小小、码农6 小时前
[特殊字符]【C++11】类的新功能全面解析:移动构造、移动赋值、default、delete、final 与 override
linux·开发语言·网络·c++
Dovis(誓平步青云)6 小时前
逆变器报警却找不到板子,热斑图怎样定位到具体组串
java·开发语言·人工智能·机器学习·卷积神经网络
坐吃山猪6 小时前
Python-Hermite基函数
开发语言·python
空~自由7 小时前
Python 正则 . * ? .* .*? (.*?) 通俗讲解
开发语言·python