【工具】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();
    });
相关推荐
云小逸12 小时前
C++ 第一阶段:对象、内存与生命周期
开发语言·c++
玖玥拾13 小时前
Lua 基础语法(二)
开发语言·unity·lua
王的宝库13 小时前
GO常用标准库包
开发语言·后端·golang
geovindu13 小时前
python: Face Recognition
开发语言·后端·python·人脸识别
三十而立洋13 小时前
JavaScript 原型链:一张图讲透「对象继承」的底层真相
前端·javascript
平头哥技术团队13 小时前
Day 13 | 调 line-height 和 margin:三处间距让名片页脱离模板感
开发语言·前端·javascript·学习·html5
黑马程序员毕设13 小时前
基于Java的仪器管理系统设计与实现
java·开发语言·spring boot·后端·微信小程序
平头哥AI13 小时前
Day 13 | 一个函数回两个值:Go 的 error 是从哪冒出来的
开发语言·后端·golang
asdzx6714 小时前
Python 实现 PDF 文本查找与高亮标注
开发语言·python·pdf
zander25814 小时前
LeetCode 1143. 最长公共子序列
开发语言·python·算法