【工具】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();
    });
相关推荐
大家的林语冰13 小时前
npm 不忍了,正式上线“阶段式发布“的新功能,进一步对抗频繁的供应链攻击!
前端·javascript·node.js
master33613 小时前
python 安装pip
开发语言·python·pip
思麟呀13 小时前
C++14概述与三大核心语法改进
开发语言·c++
shushangyun_13 小时前
批发商城系统源码多少钱?2026最新报价一览
java·开发语言·人工智能·spring·spring cloud
影视飓风TIM13 小时前
从C++引用到类封装:底层视角拆解核心语法与面试考点
java·开发语言
江畔柳前堤13 小时前
github实战指南03-Pull Request 全流程实战
开发语言·人工智能·python·深度学习·github·word
森G13 小时前
67、Qt 多媒体框架概述---------多媒体
开发语言·qt
葛兰岱尔14 小时前
从 SolidWorks 到 Three.js,从 Inventor 到 Unity——制造业CAD模型“几何-语义一体化“转换,不再是天方夜谭!
开发语言·javascript·unity
小小晓.14 小时前
零基础C++小白突破
开发语言·c++
zzqssliu14 小时前
基于Laravel + Express.js的代购系统多语言多货币架构设计
javascript·express·laravel