【工具】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();
    });
相关推荐
Tony Bai1 小时前
高并发后端:坚守 Go,还是拥抱 Rust?
开发语言·后端·golang·rust
怕浪猫1 小时前
第一章 JSX 增强特性与函数组件入门
前端·javascript·react.js
wjs20241 小时前
Swift 类型转换
开发语言
前端小L2 小时前
贪心算法专题(十):维度权衡的艺术——「根据身高重建队列」
javascript·算法·贪心算法
秃了也弱了。2 小时前
python实现定时任务:schedule库、APScheduler库
开发语言·python
weixin_440730502 小时前
java数组整理笔记
java·开发语言·笔记
Thera7772 小时前
状态机(State Machine)详解:原理、优缺点与 C++ 实战示例
开发语言·c++
niucloud-admin3 小时前
java服务端——controller控制器
java·开发语言
Fortunate Chen3 小时前
类与对象(下)
java·javascript·jvm