介绍

vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件，我们可以轻松地实现数字的递增或递减动画，并自定义其样式和动画效果。该插件可以用于许多场景，例如展示网站页面的访问量，展示应用程序的下载量，以及展示任何需要动态展示数字的场景等。

效果

该插件支持更多的参数自定义，比如数字的样式、动画的播放方向、循环播放等等。通过这些参数，可以实现更加丰富的数字动画效果。一个简单的效果如下：

安装

npm i vue-countup-v3

属性

事件

配置项

完整样例

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<script setup lang="ts">
  import { ref } from 'vue'
  import CountUp from 'vue-countup-v3'
  import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
  
  const endValueRef = ref(2022.22)
  // coutup.js options
  const options: CountUpOptions = {
    separator: '❤️'
    // ...
  }
  let countUp: ICountUp | undefined
  const onInit = (ctx: ICountUp) => {
    console.log('init', ctx)
    countUp = ctx
  }
  const onFinished = () => {
    console.log('finished')
  }
</script>

<template>
  <count-up 
    :end-val="endValueRef"
    :duration="2.5"
    :decimal-places="2"
    :options="options"
    :loop="2"
    :delay="2"
    @init="onInit"
    @finished="onFinished"></count-up>
</template>

转发：https://blog.csdn.net/qq_20185737/article/details/131454676