【工具】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();
    });
相关推荐
名字还没想好☜几秒前
Go 内存逃逸分析:什么时候变量跑到堆上
开发语言·算法·性能优化·golang·go·内存逃逸
Ivanqhz7 分钟前
NFM(神经因子分解机)
开发语言·javascript·人工智能·算法·蓝桥杯
yxlalm1 小时前
2.java秒杀项目第二课-后端登录功能
java·开发语言
光学补偿1 小时前
文件IO的前世今生
开发语言·学习·面试·java-ee
用户298698530142 小时前
在 React 中拆分 Excel 文件:从工作表到行列的实践
javascript·react.js·excel
想要成为糕糕手2 小时前
238. 除了自身以外数组的乘积 — 面试向深度解析
javascript·算法·面试
玖玥拾2 小时前
C# 语言进阶(十三)网络 DLL 库分层设计
服务器·开发语言·网络·网络协议·c#
kisshyshy2 小时前
前端存储、表单异步提交与 this 指向完全指南
前端·javascript·html
Kel2 小时前
管道、IPC、Socket:你以为的三种技术,其实是同一件事
javascript·设计模式·node.js
2601_949816352 小时前
C++内存对齐与结构体填充深度精讲:底层规则、内存裁剪、适配优化与工程避坑
开发语言·arm开发·c++