【工具】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();
    });
相关推荐
Cx330❀19 分钟前
C++ map 全面解析:从基础用法到实战技巧
开发语言·c++·算法
1***Q78421 分钟前
Python增强现实案例
开发语言·python·ar
枫叶丹427 分钟前
openGauss:面向数字时代的下一代企业级开源关系型数据库
开发语言·数据库·开源·自动化
Mintopia1 小时前
🌐 多用户并发请求下的 WebAIGC 服务稳定性技术保障
javascript·人工智能·自动化运维
Demon--hx2 小时前
[C++]迭代器
开发语言·c++
BanyeBirth2 小时前
C++窗口问题
开发语言·c++·算法
q***06293 小时前
PHP进阶-在Ubuntu上搭建LAMP环境教程
开发语言·ubuntu·php
郝学胜-神的一滴6 小时前
Qt的QSlider控件详解:从API到样式美化
开发语言·c++·qt·程序人生
学困昇6 小时前
C++11中的{}与std::initializer_list
开发语言·c++·c++11
郝学胜-神的一滴6 小时前
Qt的QComboBox控件详解:从API到样式定制
开发语言·c++·qt·程序人生·个人开发