Vue3 数字滚动插件 vue-countup-v3

介绍

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

效果

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

安装

使用该插件需要安装依赖，可以通过 npm 命令进行安装：

npm i vue-countup-v3

属性

属性	类型	默认值	描述
endVal	Number | String	-	结束值
startVal	Number | String	0	起始值
duration	Number	2.5	动画时长，单位：秒
decimalPlaces	Number	0	小数点位数
autoplay	Boolean	true	是否自动计数
loop	Boolean | Number	false	循环次数，有限次数 / 无限循环
delay	Number	0	loop 循环的间隔时间，单位：秒
options	Object	-	配置项

事件

时间	描述	返回值
@init	CountUp 实例初始化完成触发	CountUp 实例
@finished	计数结束时触发	-

配置项

配置项	类型	默认值	描述
startVal	number	0	开始数值
decimalPlaces	number	0	小数点位数
duration	number	2	动画时长，单位：秒
useGrouping	boolean	true	是否使用千位分隔符）显示
useIndianSeparators	boolean	false	是否使用印度数位分隔符
useEasing	boolean	true	是否开启数字增加过程中的缓动方式
smartEasingThreshold	number	999	设置一个阈值用于调整数字计数器的动画效果
smartEasingAmount	number	0.5	控制着数字变化的缓动效果
separator	string	,	千分位分隔符
decimal	string	.	小数点分隔符
easingFn	number	easeOutExpo	用于控制数字变化的缓动函数
formattingFn	string	-	用于格式化计数器的值
prefix	string	-	数值前缀
suffix	string	-	数值后缀
numerals	string[]	-	数字符号替换 0 - 9
enableScrollSpy	boolean	true	在可视范围内才开始动画
scrollSpyDelay	number	50ms	目标进入可视范围内后的延迟时间(毫秒)
scrollSpyOnce	boolean	false	滚动到该元素时执行数字滚动动画是否执行一次
onCompleteCallback	-	-	回调函数，可以在计数结束时执行
plugin	-	-	用于替换动画效果

完整样例

<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>