【工具】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();
    });
相关推荐
之歆几秒前
Day15_JavaScript DOM 事件完全指南:从基础到实战(上)
开发语言·javascript·ecmascript
JAVA社区几秒前
Java进阶全套教程(八)—— Docker超详细实战详解
java·运维·开发语言·docker·容器·面试·职场和发展
todaycode几秒前
Vue + CPP项目
javascript·c++·vue.js
水木流年追梦6 分钟前
大模型入门-RL基础
开发语言·python·算法·leetcode·正则表达式
.千余6 分钟前
【Linux】Socket编程UDP
linux·运维·服务器·开发语言·网络协议·学习·udp
枕星而眠8 分钟前
C++ String类精讲:从基础用法到进阶底层原理
开发语言·c++·后端·学习方法
江屿风9 分钟前
【C++笔记】模板初阶流食般投喂
开发语言·c++·笔记
Shadow(⊙o⊙)10 分钟前
qt信号和槽链接的接入与断开
开发语言·前端·c++·qt·学习
慕斯fuafua10 分钟前
JS——DOM操作
前端·javascript·html
AI玫瑰助手12 分钟前
Python运算符:逻辑运算符(and/or/not)的短路特性
开发语言·python·信息可视化