【工具】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();
    });
相关推荐
偷星星的贼111 分钟前
C++中的访问者模式实战
开发语言·c++·算法
军军君0115 分钟前
Three.js基础功能学习十一:动画与音频
前端·javascript·3d·js·threejs·三维
我即将远走丶或许也能高飞15 分钟前
reduxjs/toolkit 的学习使用
前端·javascript·学习·reactjs
莫问前路漫漫20 分钟前
Java Runtime Environment(JRE)全解析:Java 程序跨平台运行的核心基石
java·开发语言
进阶小白猿22 分钟前
Java技术八股学习Day22
java·开发语言·学习
蒟蒻的贤26 分钟前
操作系统复习
java·开发语言·数据库
摘星编程31 分钟前
OpenHarmony环境下React Native:Sensors摇一摇换图
javascript·react native·react.js
爱编程的小庄35 分钟前
Rust 发行版本及工具介绍
开发语言·后端·rust
lsx20240636 分钟前
SVN 检出操作详解
开发语言
一晌小贪欢42 分钟前
Python 对象的“Excel 之旅”:使用 openpyxl 高效读写与封装实战
开发语言·python·excel·表格·openpyxl·python办公·读取表格