【工具】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();
    });
相关推荐
2zcode1 分钟前
基于MATLAB深度卷积特征的多曝光图像自适应融合系统设计与实现
开发语言·matlab·多曝光图像自适应融合系统
不简说38 分钟前
# JS 代码技巧 vol.7 — 20 个浏览器 API 实战,自带 API 能干的事别自己封装
前端·javascript·面试
hold?fish:palm1 小时前
7 接雨水
开发语言·c++·leetcode
Hilaku1 小时前
为什么 Cloudflare 能做到毫秒级冷启动,而其它云厂商却不行?
前端·javascript·程序员
2301_794461571 小时前
JavaScript 基础知识点详解
前端·javascript·html
geats人山人海1 小时前
c# 第九章 record
开发语言·c#
早期的虫儿有鸟吃1 小时前
vue2--Vuex 模块化
开发语言·前端·javascript
浪客川2 小时前
Android的SystemUI的启动流程简析
android·开发语言
Cobyte2 小时前
使用 JavaScript 实现有限状态机的经典问题
前端·javascript·vue.js
-银雾鸢尾-2 小时前
C#中的抽象类与抽象方法
开发语言·c#