【工具】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();
    });
相关推荐
এ慕ོ冬℘゜1 分钟前
jQuery 高可用多图上传组件(企业级封装 + 踩坑全解 + 可直接上线)
前端·javascript·jquery
kymjs张涛7 分钟前
一个月,纯VibeCoding,全平台云笔记APP
前端·javascript·后端
青春喂了后端8 分钟前
Go Sidecar Status 性能优化
开发语言·性能优化·golang
摇滚侠10 分钟前
MyBatis 入门到项目实战 MyBatis 分页插件 65-66
java·开发语言·sql·mybatis
CHHH_HHH16 分钟前
【C++】哈希表原理与实战:从冲突解决到性能优化
开发语言·数据结构·c++·学习·算法·哈希算法·散列表
Cloud_Shy61816 分钟前
解读《Effective Python 3rd Edition》:从练气到老魔(第七章 Item 48 - 50)
开发语言·人工智能·笔记·python·microsoft·学习方法
狗头大军之江苏分军21 分钟前
前端路由是怎么来的
前端·javascript·后端
A__tao35 分钟前
告别手写 Go 结构体!推荐一个支持注释解析的 YAML 转 Struct 在线工具
开发语言·后端·golang
何以解忧,唯有..37 分钟前
Go 语言语句分隔符详解:分号、换行与代码规范
开发语言·golang·代码规范
人邮异步社区41 分钟前
C语言进阶的书籍推荐
c语言·开发语言