【工具】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();
    });
相关推荐
Never_Satisfied1 分钟前
在JavaScript / HTML中,HTML元素自定义属性使用指南
开发语言·javascript·html
Ulyanov5 分钟前
大规模战场数据与推演:性能优化与多视图布局实战
开发语言·python·性能优化·tkinter·pyvista·gui开发
前端 贾公子7 分钟前
husky 9.0升级指南
javascript
nsjqj7 分钟前
JavaEE初阶:多线程初阶(2)
java·开发语言
明天…ling11 分钟前
php底层原理与安全漏洞实战
开发语言·php
爱说实话19 分钟前
C# DependencyObject类、Visual类、UIElement类
开发语言·c#
智码未来学堂20 分钟前
C语言指针:打开通往内存世界的大门
c语言·开发语言
黎雁·泠崖22 分钟前
Java面向对象:对象数组核心+综合实战
java·开发语言
野生技术架构师29 分钟前
2026最新最全Java 面试题大全(整理版)2000+ 面试题附答案详解
java·开发语言
南村群童欺我老无力.31 分钟前
Flutter 框架跨平台鸿蒙开发 - 打造表情包制作器应用
开发语言·javascript·flutter·华为·harmonyos