【工具】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();
    });
相关推荐
哞哞不熬夜3 分钟前
JavaEE--SpringIoC
java·开发语言·spring boot·spring·java-ee·maven
newxtc7 分钟前
【猿辅导-注册安全分析报告-无验证方式导致安全隐患】
开发语言·selenium·安全·yolo·安全爆破
张人玉9 分钟前
c#WPF基础知识
开发语言·c#·wpf
JNU freshman16 分钟前
vue 技巧与易错
前端·javascript·vue.js
Asort24 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
我是日安32 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼34 分钟前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
却尘38 分钟前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试
歪歪10039 分钟前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
std78791 小时前
Rust 与 Go – 比较以及每个如何满足您的需求
开发语言·golang·rust