【工具】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();
    });
相关推荐
Freak嵌入式13 分钟前
树莓派 Pico GPIO 深度解析:从 MCU 架构到寄存器控制,底层原理与实践指南
java·开发语言·科技·单片机·嵌入式硬件·架构
啊啊啊啊啊!!!!21 分钟前
【c++】map和set的使用
开发语言·c++
hu92451955921 分钟前
Matlab保护源代码—P文件和exe文件详细解析
开发语言·matlab
for_ever_love__23 分钟前
python爬虫: GET请求与POST请求
开发语言·爬虫·python·网络编程
Freak嵌入式25 分钟前
实战对比:用 mpremote/Putty/MobaXterm 连接树莓派 Pico REPL,谁更省心?
java·大数据·开发语言·科技·单片机·嵌入式硬件
ttwuai30 分钟前
Go 后台管理系统组件库文档怎么写,才不会坑后续维护?
开发语言·javascript·golang
茉莉玫瑰花茶35 分钟前
知识库的构建 [ 3 ]
开发语言·python
旧梦952738 分钟前
Java 枚举类详解:从基础语法到高级用法
java·开发语言·python
yivifu38 分钟前
查拼音程序升级版
开发语言·python
小灰灰搞电子42 分钟前
分享自己写的一个通信协议源码,支持C++和C,双包头+不定长
c语言·开发语言·c++