【工具】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();
    });
相关推荐
天外飞雨道沧桑4 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
kkeeper~4 小时前
0基础C语言积跬步之深入理解指针(5下)
c语言·开发语言
一直不明飞行5 小时前
Java的equals(),hashCode()应该在什么时候重写
java·开发语言·jvm
盲敲代码的阿豪5 小时前
Python 入门基础教程(爬虫前置版)
开发语言·爬虫·python
basketball6165 小时前
C++ 构造函数完全指南:从入门到进阶
java·开发语言·c++
互联科技报5 小时前
2026超融合选型:Top5品牌与市场格局解读
开发语言·perl
weixin199701080166 小时前
[特殊字符] 智能数据采集:数字化转型的“数据石油勘探队”(附Python实战源码)
开发语言·python
想唱rap6 小时前
IO多路转接之poll
服务器·开发语言·数据库·c++
暗冰ཏོ6 小时前
VUE面试题大全
前端·javascript·vue.js·面试
@杰克成6 小时前
Java学习30
java·开发语言·学习