【工具】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();
    });
相关推荐
北风toto2 分钟前
研发效能与后端核心技术全景指南:从CI/CD到共性组件实战
java·开发语言·ci/cd
Billy121385 分钟前
Day12-C++20 Coroutines(上):协程原理与Promise/Awaitable机制
开发语言·c++进阶学习
01二进制代码漫游日记6 分钟前
C++基础入门速通
java·开发语言·c++
Herbert_hwt7 分钟前
第六章 Java深入理解接口、函数式接口与lambda表达式
java·开发语言·算法
岁岁种桃花儿8 分钟前
Vue核心语法第十一篇:绑定样式
前端·javascript·vue.js
橙橙笔记26 分钟前
C++的学习第三部分
开发语言·c++·学习
2603_965148119 小时前
如何解析JSON数据?API返回的商品信息处理教程
开发语言·数据库·python·自动化·json·api
万少9 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
Brown.alexis10 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝11 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps