【工具】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();
    });
相关推荐
重铸码农荣光几秒前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·前端框架
前端老宋Running1 分钟前
拒绝“无效焦虑”:为什么你 80% 的 useMemo 都在做负优化?
前端·javascript·react.js
品克缤2 分钟前
vue项目配置代理,解决跨域问题
前端·javascript·vue.js
m0_740043732 分钟前
Vue简介
前端·javascript·vue.js
我叫张小白。2 分钟前
Vue3 v-model:组件通信的语法糖
开发语言·前端·javascript·vue.js·elementui·前端框架·vue
天天向上10245 分钟前
vue3 封装一个在el-table中回显字典的组件
前端·javascript·vue.js
哆啦A梦15886 分钟前
66 导航守卫
前端·javascript·vue.js·node.js
我叫张小白。7 分钟前
Vue3 组件通信:父子组件间的数据传递
前端·javascript·vue.js·前端框架·vue3
翻斗花园牛图图-8 分钟前
Qt开发——系统相关3(Qt网络编程)
开发语言·qt
王大宇_8 分钟前
word解析从入门到出门
前端·javascript