【工具】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();
    });
相关推荐
BillKu10 分钟前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript
jayson.h12 分钟前
PDF 合并+添加页码 相关库、类、函数
开发语言·前端·python
qq_3227627521 分钟前
一个接口从能用到稳定,中间差的到底是什么
服务器·开发语言·lua·接口·fastapi·请求
Data_Journal30 分钟前
Scrapyd:分步教程
开发语言·python·microsoft·golang·编辑器·html·iphone
离陌在学C#1 小时前
C# 异步编程:从 async/await 到 Task 实战指南
开发语言·数据库·c#
羚尔1 小时前
C语言数组
c语言·开发语言
女神下凡2 小时前
芯参谋(11): 各种存储芯片电路设计
开发语言·嵌入式硬件
冬夜戏雪2 小时前
笔试的Scanner in Scanner out
java·开发语言
Zane1994122 小时前
HashSet、TreeSet、LinkedHashSet:底层都是“套壳“
java·开发语言
顶级自由人2 小时前
本地正常、线上正常,为什么一个 Hook 仍会报错?
前端·javascript·程序员