【工具】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();
    });
相关推荐
好评124几秒前
C++ 字符串:始于 char*,终于深拷贝
开发语言·c++·stl·字符串
小尧嵌入式8 分钟前
QT软件开发知识点流程及记事本开发
服务器·开发语言·数据库·c++·qt
哆啦A梦15888 分钟前
商城后台管理系统 04,商品添加-清空列表
javascript·vue.js·elementui
哆啦A梦15889 分钟前
商城后台管理系统 06,类目选择实现
javascript·vue.js·elementui
ByNotD0g22 分钟前
Golang Green Tea GC 原理初探
java·开发语言·golang
qingyun98924 分钟前
使用递归算法深度收集数据结构中的点位信息
开发语言·javascript·ecmascript
努力学习的小廉32 分钟前
【QT(三)】—— 信号和槽
开发语言·qt
哆啦A梦158832 分钟前
【vue实战】商城后台管理系统 01 项目介绍
前端·javascript·vue.js
盼哥PyAI实验室37 分钟前
Python自定义HTTP客户端:12306抢票项目的网络请求管理
开发语言·python·http
这儿有一堆花41 分钟前
Python优化内存占用的技巧
开发语言·python