【工具】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();
    });
相关推荐
剩下了什么5 小时前
float32 与 float64 精度陷阱:如何在 Go 中避免错误使用
开发语言·后端·golang
你别说话了5 小时前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.5 小时前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫5 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
暴力求解5 小时前
Linux网络---传输层协议TCP(二)
linux·服务器·开发语言·网络·tcp/ip
吴声子夜歌5 小时前
Java面试题——基础(一)
java·开发语言
小庞在加油6 小时前
WinDbg实战:QT/跨平台项目死锁与无响应问题排查指南
开发语言·qt·windbg·工具
Vae_Mars6 小时前
C#中的delegate委托
开发语言·c#
一直走下去-明7 小时前
简单的http抓包解包完整代码
开发语言·python
caimouse7 小时前
ReactOS 图形系统分析(51):元文件子系统 — metafile.c
c语言·开发语言