【工具】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();
    });
相关推荐
漂流瓶jz3 小时前
总结CSS组件化演进之路:命名规范/CSS Modules/CSS in JS/原子化CSS
前端·javascript·css
踩着两条虫4 小时前
「AI + 低代码」的可视化设计器
开发语言·前端·低代码·设计模式·架构
JoneBB4 小时前
ABAP Webservice连接
运维·开发语言·数据库·学习
即使再小的船也能远航4 小时前
【Python】安装
开发语言·python
Irissgwe5 小时前
类与对象(三)
开发语言·c++·类和对象·友元
steven~~~5 小时前
为什么mq报错
javascript
雪度娃娃5 小时前
转向现代C++——优先选用nullptr而不是0和NULL
开发语言·c++
萌新小码农‍6 小时前
python装饰器
开发语言·前端·python
KK溜了溜了6 小时前
Python从入门到精通
服务器·开发语言·python
故事和你916 小时前
洛谷-【图论2-1】树5
开发语言·数据结构·c++·算法·动态规划·图论