【工具】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();
    });
相关推荐
CoderIsArt13 分钟前
C#中UI 线程与 Dispatcher
开发语言·ui·c#
单线程_012 小时前
从案例分析 Vue3 Tokenizer+Parser 源码三
前端·javascript·vue.js
AI情绪识别开源3 小时前
检信 ALLEMOTION OS 加密打包可执行程序 — 全面测试报告版本: v1.3功能测试 / 性能测试 /
开发语言·数据结构·人工智能·功能测试
小磊哥er4 小时前
深入解构Claude Code - 第 8 篇 · 数据放哪、钱怎么算
javascript·ai编程
「QT(C++)开发工程师」4 小时前
C++ auto 用法详解
开发语言·c++
OPEN-F4 小时前
C++STL教程:容器适配器与实用工具
开发语言·c++
yaoxin5211234 小时前
507. Java 反射 - 在 BeanFactory 中实现依赖注入
java·开发语言
OPEN-F4 小时前
C++模板教程:变参模板、折叠表达式与SFINAE
java·开发语言·c++
有点。4 小时前
C++二叉搜索树进阶
开发语言·c++