【工具】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();
    });
相关推荐
大风起兮云飞扬丶11 小时前
Java——枚举
java·开发语言
小灰灰搞电子11 小时前
Rust+Slint 实现高级动态消息提示框源码分享
开发语言·rust
Dev _11 小时前
Python解释器安装在系统级目录导致命令行用户‌没有权限‌向该目录写入文件
开发语言·python
qq_4069810311 小时前
大白话rust系列08 当变量遮蔽遇上引用,探究变量遮蔽的本质
开发语言·后端·rust
小poop11 小时前
从“雷峰塔”到“对象”:JavaScript基础语法入门指南
前端·javascript
喵了几个咪12 小时前
GoWind ShortPlay 拆解:不用模型的推荐闭环——埋点回流、三路召回与已看去重
开发语言·后端·微服务·golang·gowind
谙弆悕博士12 小时前
用 C 写了个 Windows 聊天室,踩了几个多线程和控制台的坑
c语言·开发语言·c++·windows·网络编程·聊天室
Canmag 兴隆磁性12 小时前
回复磁导率 μ_R:永磁体在动态磁路中的关键参数
开发语言·学习·r语言·永磁材料·充磁·磁导率
chunyublog12 小时前
HDFS 上传文件名空格问题排障教程
前端·javascript·npm
CRMEB系统商城12 小时前
鲜花零售的预售与积分营销
开发语言·人工智能·科技·小程序·零售