【工具】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();
    });
相关推荐
大圣编程6 分钟前
面向对象深度理解
java·开发语言·算法
不好听6139 分钟前
Node.js 工程化开发流程 — 知识点总结
javascript·node.js
爱喝水的鱼丶12 分钟前
SAP-ABAP:SAP 简单报表输出开发系列(共6篇) 第四篇:SAP 报表异常处理机制:数据校验与消息提示规范落地
开发语言·数据库·学习·算法·sap·abap
影寂ldy13 分钟前
C# const 常量 / readonly 只读 / static readonly
java·开发语言·c#
ZengLiangYi32 分钟前
sql.js WASM 深度解析
javascript·数据库·后端
iCxhust43 分钟前
c#多串口重量采集上位机程序
开发语言·汇编·c#·微机原理·8088单板机
JustHappy1 小时前
古法编程秘籍(三):为什么需要函数?因为程序员讨厌重复劳动
前端·javascript·后端
想要狠赚笔的小燕1 小时前
vue项目的入口文件是什么 main.js还是index.html,他俩有啥区别
前端·javascript
QK_001 小时前
volatile 关键字核心作用
开发语言
Dxy12393102161 小时前
Python Tensor 向量入门:从零理解深度学习的“数据语言“
开发语言·python·深度学习