【工具】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();
    });
相关推荐
itwlz2 分钟前
vite配置@别名,以及如何让IDE智能提示路经
开发语言·前端·javascript
lichenyang4534 分钟前
添加按钮跳转页面并且根据网站的用户状态判断是否显示按钮
开发语言·前端·javascript
誰能久伴不乏8 分钟前
Qt 开发中的父类与父对象的区别和父对象传递:如何选择 `QWidget` 或 `QObject`?
java·开发语言·qt
弱冠少年8 分钟前
golang入门
开发语言·后端·golang
Humbunklung11 分钟前
Rust 函数
开发语言·后端·rust
waterHBO14 分钟前
python 爬虫工具 mitmproxy, 几问几答,记录一下
开发语言·爬虫·python
白云~️20 分钟前
table表格合并,循环渲染样式
javascript·vue.js·elementui
Hilaku22 分钟前
JavaScript 里的 !0、!1 到底是啥?聊聊那些压缩器最爱的“极简写法”
前端·javascript
誰能久伴不乏23 分钟前
理解继承与组合的本质:Qt 项目中的设计选择指南
开发语言·qt
全栈陈序员31 分钟前
前端文件下载常用方式详解
前端·javascript·chrome·ajax·css3·html5·safari