【工具】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 小时前
扩展PE头属性说明
开发语言·网络安全·pe
秋名RG13 小时前
Java 基础语法
java·开发语言
码行山野赴时序归途13 小时前
C 语言文件操作完全指南:从打开到关闭
c语言·开发语言
2501_9378609413 小时前
Java 文件操作与IO(下):字节流、字符流实战IO读写
java·开发语言·python
事圆则缓13 小时前
Kotlin 高阶工程化与 Android 深入实践
android·开发语言·kotlin
何以解忧,唯有..13 小时前
Vue 3 响应式核心:ref() 与 reactive() 的深入解析与实战
前端·javascript·vue.js
驭渊的小故事13 小时前
java抽奖项目-奖品上传中传递参数类型的错误
java·开发语言
名字还没想好☜13 小时前
Go 时间格式化为什么用 2006-01-02:time.Format/Parse 的参考时间、时区与解析踩坑
开发语言·后端·golang·go
Dream Cosmos13 小时前
C++ 多态下篇:虚函数表、动态绑定与多态底层原理
开发语言·c++
zzzzzz31014 小时前
看 react-bits,不要只看“酷炫”:一套阅读动画交互组件库的框架
javascript·react.js·动效