【工具】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();
    });
相关推荐
starzy19903 小时前
深入理解Scala隐式类:扩展方法机制
开发语言·人工智能·scala
M--Y3 小时前
LangGraph 工作流模式
开发语言·javascript·python·langchain·大模型·llm·langgraph
吴可可1235 小时前
WScript Shell操作注册表详解
开发语言
纪念 2295 小时前
C++ 算法基础 (差分)
开发语言·c++·算法
johnjincaaaa8 小时前
猿人学第 18 题「jsvmp 洞察先机」逆向通关实录
javascript·后端
码农小河6610 小时前
基于PHP的电商后台蜜罐系统
开发语言·php
starzy199010 小时前
深入理解Scala柯里化函数:函数链式变换
开发语言·scala
ShineWinsu10 小时前
对于Qt:QTreeWidget常见属性以及QTreeWidgetItem类的解析
开发语言·c++·qt·gui·客户端·多叉树·qtreewidget
落羽的落羽11 小时前
【C++】C++17的主要特性
linux·服务器·开发语言·c++·算法·机器学习
FungLeo11 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构