【工具】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();
    });
相关推荐
IT笔记16 分钟前
【Rust】Rust Match 模式匹配详解
java·开发语言·rust
逝水无殇38 分钟前
C# 运算符重载详解
开发语言·后端·c#
TPBoreas1 小时前
配置信息防泄露方案:.env 环境隔离详解(dotenv-java)
java·开发语言
山河木马1 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
敲代码的嘎仔1 小时前
实习日志day6--实习日志day6--title命名规范化&businessType纠正&补充缺失的@Log注解&报警与通信模块补充&产出阶段总结文档
java·开发语言·人工智能·git·python·实习·大二
江华森2 小时前
Python 实现高德地图找房(一):环境搭建与数据爬虫
开发语言·爬虫·python
杜子不疼.2 小时前
【Qt初识】信号槽(三):机制意义、断开连接与 Lambda 表达式
开发语言·数据库·qt
Appthing2 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript
老迟到的茉莉3 小时前
Hermes 是谁?跟 Claude Code 差在哪
开发语言·python
学逆向的3 小时前
汇编——内存
开发语言·汇编·算法·网络安全