【工具】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();
    });
相关推荐
wangchunyu11414 分钟前
JAVA 类加载机制与双亲委派模型
java·开发语言
lambo mercy35 分钟前
持久化01——线程级持久化
java·开发语言·jvm
CoderYanger37 分钟前
Java EE 进阶:5. Spring IoC&DI(第一弹):Spring IoC
java·开发语言·spring boot·spring·面试·职场和发展·java-ee
Hilaku44 分钟前
删了一个没用的 console.log,生产环境直接崩了!
前端·javascript·程序员
真上帝的左手1 小时前
2. 编程语言-JavaScript
开发语言·javascript
zhanghaha13141 小时前
C# 系列教程_1 基础语法篇(面向新手系统教程)
开发语言·c#
2601_949847751 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
通问AI1 小时前
【实战】企业口径一致性检查:用 Python 对齐官网/招聘平台/投标文件三个来源的成立日期与注册地
开发语言·python
zyseo81 小时前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
老王IT1 小时前
Go开发环境搭建(window操作系统)
开发语言·后端·golang