【工具】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();
    });
相关推荐
搂着猫睡的小鱼鱼6 分钟前
签名逆向与浏览器自动化 / 动态渲染抓取京东评论信息
前端·javascript·自动化
项目題供诗7 分钟前
C语言基础(六)
c语言·开发语言
Coding茶水间8 分钟前
基于深度学习的吸烟检测系统演示与介绍(YOLOv12/v11/v8/v5模型+Pyqt5界面+训练代码+数据集)
开发语言·人工智能·深度学习·yolo·目标检测·机器学习
盛者无名10 分钟前
Rust的所有权(Owenership)
开发语言·rust
独自破碎E15 分钟前
说说Java中的JIT
java·开发语言
凯新生物17 分钟前
Mannose-PEG-CY5.5,CY5.5-PEG-Mannose技术手册:分子量选型与溶解性说明
javascript·c#·bash·symfony
齐鲁大虾17 分钟前
如何通过Java调取打印机打印图片和文本
java·开发语言·python
wangbing112521 分钟前
ES6 (ES2015)新增的集合对象Set
前端·javascript·es6
Remember_99330 分钟前
【数据结构】初识 Java 集合框架:概念、价值与底层原理
java·c语言·开发语言·数据结构·c++·算法·游戏
hqwest35 分钟前
码上通QT实战33--监控页面14-刻度盘旋转
开发语言·qt·qdial·qlcdnumber·modbus功能码06