【工具】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();
    });
相关推荐
小成202303202657 分钟前
C++~02运算符重载
开发语言·c++
emfuture17 分钟前
龙芯2K300 PLC 在拉丝机收线系统改造中的应用:硬件选型、张力控制与国产化替代实践
java·开发语言·智能制造·plc·国产化替代
geovindu31 分钟前
rust: Mediator Pattern
开发语言·后端·设计模式·rust·中介者模式·行为模式
honkun635 分钟前
vue 下拉树组件 vxe-table-select 实现分页多选
前端·javascript·vue.js
传奇开心果编程41 分钟前
【Rust入门练中学】第8课:错误处理
开发语言·rust·错误处理·编程语言理论·通用编程语言
大熊程序猿1 小时前
用 ASP.NET Core + SignalR 做一个带实时对战房间的打字练习平台
javascript
OpsEye1 小时前
大量无效 Token 消耗,是很多企业被忽略的隐形成本
javascript·ai编程
郑同学的笔记1 小时前
【c++随笔30】C++ 注册回调函数
开发语言·c++
七夜zippoe1 小时前
启元 Q1 腿部运动学逆解:Python 算站立下蹲关节角
开发语言·python·ai·机器人·腿部运动学
熊猫钓鱼>_>1 小时前
精准碰一碰近场分享与拖拽投送实战:把文件“碰“进另一台设备【鸿蒙心迹】
开发语言·华为·harmonyos·鸿蒙·openharmony