【工具】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();
    });
相关推荐
摸鱼的春哥18 分钟前
【实战】吃透龙虾🦞,你写的Agent也能支持Skills渐进式披露
前端·javascript·后端
孟祥_成都40 分钟前
用 AI,0 基础复刻网页顶级特效!😀
前端·javascript·vibecoding
兆子龙15 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙15 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
KKKK15 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰15 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端
Din16 小时前
主动取消的防抖
前端·javascript·typescript
H5开发新纪元16 小时前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干16 小时前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript