【工具】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();
    });
相关推荐
你怎么知道我是队长2 分钟前
JavaScript的函数介绍
开发语言·前端·javascript
weedsfly6 分钟前
观察者模式 vs 发布-订阅模式:从概念到实战,一次讲清楚
前端·javascript·面试
YMWM_8 分钟前
python-venv虚拟环境
linux·开发语言·python
不负岁月无痕24 分钟前
STL -- C++ 红黑树封装 Map 和 Set
java·c语言·开发语言·c++·面试
miss24 分钟前
海康威视 IoT 平台前端实战:视频流、海量设备与实时数据可视化
前端·javascript·物联网
mONESY25 分钟前
MCP 协议实战博客:跨进程、跨语言可复用 AI 工具标准化方案
javascript
小园子的小菜28 分钟前
Java核心基础:反射与泛型底层原理及实战用法详解
java·开发语言
十五年专注C++开发1 小时前
C++之std::numeric_limits介绍
开发语言·c++·limits
2501_925963381 小时前
Hi3516 + WS73 SDIO Wi-Fi 适配笔记
java·开发语言
CoderYanger1 小时前
视频切割脚本(Python版)
linux·开发语言·windows·后端·python·程序人生·职场和发展