【工具】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();
    });
相关推荐
研☆香5 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6
ice8130331816 小时前
【Python】Matplotlib折线图绘制
开发语言·python·matplotlib
三品吉他手会点灯6 小时前
C语言学习笔记 - 44.运算符和表达式 - 运算符2 - 除法与取余运算符
c语言·开发语言·笔记·算法
kkeeper~6 小时前
0基础C语言积跬步之动态内存管理
c语言·开发语言
橘右今6 小时前
2026 Java后端高频面试宝典
java·开发语言·面试
xiaofeichaichai6 小时前
Map / Set / WeakMap / WeakSet
前端·javascript
微小冷6 小时前
Julia卫星工具箱SatelliteToolbox简介
开发语言·航天·坐标转换·julia·卫星工具箱
2601_colin7 小时前
Codex插件全流程实战指南
开发语言·经验分享·笔记·微信开放平台
Song_da_da_7 小时前
C#与VisionPro联合编程实战:机器视觉二次开发完整指南
开发语言·microsoft·c#
xyzzklk7 小时前
解决Salesforce无法向外发送邮件
android·java·开发语言·网络·crm·salesforce·客户关系管理