【工具】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();
    });
相关推荐
太阳的后裔13 分钟前
随笔一些用C#封装的控件
开发语言·c#
tianyuanwo14 分钟前
Rust语言组件RPM包编译原理与Cargo工具详解
开发语言·网络·rust·rpm
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio5 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一5 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
lingchen19067 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152877 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠7 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼8 小时前
Java 集合Collection—List
java·开发语言