【工具】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();
    });
相关推荐
Cheng小攸7 小时前
入侵检测环境部署
开发语言·php
riuphan7 小时前
揭秘 JS 类型转换:ToPrimitive 机制的神秘面纱
前端·javascript
我是唐青枫7 小时前
Java MyBatis-Flex 实战指南:从 BaseMapper 到 QueryWrapper 的轻量 ORM 用法
java·开发语言·mybatis
ShyanZh7 小时前
Markitdown 多格式文档智能解析实战指南
开发语言·c#
一只专注api接口开发的技术猿7 小时前
OpenClaw 对接淘宝商品 API,低成本实现全天候选品监控|附可运行 Python 实操代码
大数据·开发语言·数据库·python
xingpanvip8 小时前
星盘接口开发文档:马盘次限盘接口指南
android·开发语言·python·php·lua
FBI HackerHarry浩8 小时前
第二阶段Day07【Python生成器、yield关键字、property、正则表达式】
开发语言·python·正则表达式
sagima_sdu8 小时前
Vue 前端径向渐变背景制作
前端·javascript·vue.js
神奇小汤圆8 小时前
Java 并发编程核心原理与生产级最佳实践
javascript
iiiiyu8 小时前
IO流(二)
java·开发语言·数据结构·编程语言