【工具】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();
    });
相关推荐
李妍.8 小时前
02Numpy基础(上)
开发语言·python
TheBestRucy8 小时前
Python 九阳神功之贰:面向对象(下)
开发语言·python
AI_小站9 小时前
刚面完百度的 Agent 开发岗,我才发现:世界就是个巨大的草台班子
java·开发语言·人工智能·spring·百度·langchain
felixking9 小时前
C++20 协程
开发语言·c++·协程
Zane19941211 小时前
CAS 与原子类:Java 如何实现无锁编程
java·开发语言
码农颜12 小时前
6.3 主函数流程剖析
开发语言·php
TheBestRucy12 小时前
Python 九阳神功:从零筑基到线程飞升
服务器·开发语言·网络·人工智能·python
研☆香12 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
草莓橙子碗13 小时前
Claude 使用指南
开发语言·python
longxiaozhang613 小时前
C# Array类:数组其实没那么难
开发语言·c#