【工具】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();
    });
相关推荐
鱼香鱼香rose8 分钟前
java-2
java·开发语言·python
qq_589666058 小时前
TypeScript 完整入门教程
前端·javascript·typescript
星栈独行10 小时前
翻完 Pi 源码:它和 Codex、Claude Code 有何不同
开发语言·javascript·人工智能·程序人生
qq_4480111610 小时前
C语言中的变量和函数的定义与声明
android·c语言·开发语言
落落Plus11 小时前
浏览器缓存机制详解
javascript·缓存·浏览器缓存
孫治AllenSun11 小时前
【DataX】生产环境搭建DataX集群案例
java·开发语言·jvm
c2385612 小时前
把 C++ 内存分配拆透:new 与 malloc 的三层血缘
开发语言·c++·算法
浅水壁虎13 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥13 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
moonsims13 小时前
星闪在跨域无人化系统作用
开发语言·php