【工具】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();
    });
相关推荐
weixin_4407305032 分钟前
字符编码笔记-utf-8 、unicode、gbk,ascii编码格式
开发语言·笔记
励志不掉头发的内向程序员2 小时前
【从零写一个CAD 03】三个 double 值得单独一个类吗:把视图变换抽成 View
开发语言·c++·qt·学习·系统架构
PHP实战开发录2 小时前
PHP接口大整数为什么变了
开发语言·php
临床数据科学和人工智能兴趣组5 小时前
在R语言中, 使用 as.factor() 函数转换数值型变量
开发语言·r语言
andyweike8 小时前
php笔记
开发语言·笔记·php
Circ.9 小时前
Python 调试 Litellm 本地大模型接口:模型列表与对话接口实操踩坑记录
开发语言·python
现任明教教主~11 小时前
Thinkphp站群蜘蛛池SaaS系统YanyvSEO含多用户/积分/六大引擎计费/易支付对接
java·开发语言·spring
Zhou14113611 小时前
SpringSecurity_02_授权与高级功能
开发语言·python
码匠许师傅12 小时前
【C++三方组件】cpp-httplib:一个头文件起 HTTP 服务
开发语言·c++·http