【工具】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();
    });
相关推荐
swipe14 小时前
正则表达式入门到进阶:从表单校验到手写模板引擎
前端·javascript·面试
kyriewen15 小时前
前端错误监控最全指南:捕获 JS 异常、Promise 拒绝、资源加载失败,附上报代码
前端·javascript·监控
大家的林语冰15 小时前
ESLint 近期动态大全,新版本正式发布,antfu 大佬推荐的插件也更新了!
前端·javascript·前端工程化
胡志辉16 小时前
深入浅出 call、apply、bind
前端·javascript·后端
十九画生19 小时前
parentID ``` JavaScript 是区分大小写的,所以这两个不是同一个字段。 第二,`parent` 没有声明。 应该先写: `
javascript
怕浪猫19 小时前
Electron 开发实战(十六):总结与展望|生态现状、框架对比、行业趋势与学习指南
前端·javascript·electron
ZengLiangYi20 小时前
批量导入 1000 条对话的性能优化实战
javascript·后端·架构
竹林81821 小时前
用 wagmi v2 + viem 监听合约事件时踩的坑,我花了两天才把"遗漏事件"修好
javascript
小花酱酱21 小时前
QQ群里只有你一个人?邪门歪道破局之路——AstrBot
javascript
bonechips21 小时前
JS 数组指南:从内存原理到二维矩阵
前端·javascript