【工具】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();
    });
相关推荐
左左右右左右摇晃10 分钟前
Java并发——死锁
java·开发语言·spring
小白橘颂11 分钟前
【C语言】基础概念梳理(一)
c语言·开发语言·stm32·单片机·mcu·物联网·51单片机
沫离痕11 分钟前
AI机器人客服-Dify接入
开发语言·javascript·ecmascript
半瓶榴莲奶^_^28 分钟前
java模式
java·开发语言
sword devil90028 分钟前
TRAE:agent团队
开发语言
co_wait30 分钟前
【c 语言】linux下gcc编译工具的使用
linux·c语言·开发语言
2301_8154829331 分钟前
C++编译期矩阵运算
开发语言·c++·算法
☆56636 分钟前
C++中的类型擦除技术
开发语言·c++·算法
m0_5698814741 分钟前
C++与自动驾驶系统
开发语言·c++·算法
天理小学渣43 分钟前
JavaScript_基础教程_自学笔记
开发语言·javascript·笔记