【工具】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();
    });
相关推荐
丈剑走天涯31 分钟前
JDK 17 正式特性
java·开发语言
秋田君40 分钟前
QT_QFontDialog类字体对话框
开发语言·qt
圣光SG1 小时前
Java操作题练习(七)
java·开发语言·算法
麻瓜老宋2 小时前
AI开发C语言应用按步走,表达式计算器calc的第二十三步,多行输入、进制输出、错误恢复、常量折叠、配置加载等
c语言·开发语言·atomcode
用户938515635072 小时前
从零构建《天龙八部》知识库:EPUB 加载→文本分割→向量嵌入→Milvus 存储→RAG 问答,一条链路打通
javascript·人工智能·全栈
q567315232 小时前
企业级 HTTP 代理采购选型:技术评估清单 15 项
开发语言·网络·爬虫·网络协议·http·隧道ip·代理ip
天天进步20153 小时前
Python全栈项目--智能办公自动化系统
开发语言·python
cm04Z9c914 小时前
C#摸鱼实录——IoC与DI案例详解
开发语言·c#
柚yuzumi4 小时前
变量明明定义了,为什么访问不到?深入理解 JavaScript 作用域
javascript
long3164 小时前
Java 新手入门与实战开发指南
java·开发语言