【工具】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();
    });
相关推荐
cike_y几秒前
Spring整合Mybatis:dao层
java·开发语言·数据库·spring·mybatis
松涛和鸣4 分钟前
45、无依赖信息查询系统(C语言+SQLite3+HTML)
c语言·开发语言·数据库·单片机·sqlite·html
feifeigo1237 分钟前
基于C#实现即时通讯工具
开发语言·c#
hongkid8 分钟前
React Native 如何打包正式apk
javascript·react native·react.js
这是程序猿11 分钟前
基于java的SpringBoot框架医院药品管理系统
java·开发语言·spring boot·后端·spring·医院药品管理系统
yousuotu14 分钟前
基于Python实现水果新鲜度分类
开发语言·python·分类
七夜zippoe19 分钟前
异步编程实战:构建高性能Python网络应用
开发语言·python·websocket·asyncio·aiohttp
tianyuanwo20 分钟前
Python虚拟环境深度解析:从virtualenv到virtualenvwrapper
开发语言·python·virtualenv
看见繁华29 分钟前
GO 教程
开发语言·后端·golang
Yy_Yyyyy_zz32 分钟前
深入理解 Go 的多返回值:语法、编译原理与工程实践
开发语言·后端·golang