vue3-number-scroll使用指南

​ 该组件用于创建具有动画效果的数字显示，可以配置起始值、结束值、动画持续时间等属性。 ​ 它是基于 vue-count-to 升级改造,由于 vue-count-to 不支持vue3,以及长时间没有更新的原因,我在项目中的大屏项目需要使用,所以顺便升级维护一下。

描述

新特性	支持
组件支持CamelCase和kebab-case命名方式引入(本文档采用大驼峰命名展示)	✅
重构为Vue3所支持的Composition Api	✅
良好的typescript支持	✅
完善部分方法Api的语义化,新增一些新的属性	✅

开始使用

npm i vue3-number-scroll

局部引入

<script setup lang="ts">
import {Vue3NumberScroll} from 'vue3-number-scroll'
</script>

<template>
	<Vue3NumberScroll :start-val="0" :end-val="10000"></Vue3NumberScroll>
</template>

全局引入

import { createApp } from 'vue'
import App from './App.vue'

import Vue3NumberScroll from 'vue3-number-scroll' //引入

const app = createApp(App)

app.use(Vue3NumberScroll) //全局注册

app.mount('#app')

属性（Props）

属性名	类型	默认值	说明
startVal	Number	0	动画的起始值
endVal	Number	2000	动画的结束值
duration	Number	3000	动画持续时间（毫秒）
autoplay	Boolean	true	是否自动播放动画
decimals	Number	0	小数位数，必须为非负整数
decimal	String	'.'	小数点字符
separator	String	','	千位分隔符
prefix	String	''	数字前缀
suffix	String	''	数字后缀
useEasing	Boolean	true	是否使用缓动函数
easingFn	Function	默认函数	缓动函数，默认使用一个缓动函数（公式：c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b）
repeatAnimation	Number	undefined	重复动画的间隔时间（毫秒），如果未定义，则动画不会重复,传秒数,例如1000,代表1秒,动画则会在1秒执行一次

完整使用示例

<div>
  <Vue3NumberScroll 
    :start-val="0"  <!-- 动画开始的初始值 -->
    :end-val="10000"  <!-- 动画结束的目标值 -->
    :duration="3000"  <!-- 动画的持续时间，以毫秒为单位 -->
    :autoplay="true"  <!-- 是否自动播放动画，布尔值 -->
    :decimals="0"  <!-- 小数点后的位数，设置为0表示没有小数 -->
    decimal="."  <!-- 小数点的符号 -->
    separator=","  <!-- 千位分隔符 -->
    prefix="¥"  <!-- 数字前缀 -->
    suffix=" 元"  <!-- 数字后缀 -->
    :useEasing="true"  <!-- 是否使用缓动效果，布尔值 -->
    :easingFn="customEasingFn"  <!-- 自定义缓动函数 -->
    :repeatAnimation="1000"  <!-- 动画几秒钟重复一次 -->
    @onFinish="handleFinish"  <!-- 动画完成时触发的事件 -->
    @init="handleInit"  <!-- 组件初始化时触发的事件 -->
  />
</div>

事件（Events）

事件名	参数	说明
onFinish	-	动画完成时触发
init	-	组件挂载时触发

方法（Methods）

组件暴露了一些控制动画的方法，可以使用通过实例来调用这些方法：

start()

开始动画。重置动画的开始时间，并重新计算显示值。

pause()

暂停动画。取消当前的requestAnimationFrame。

resume()

恢复动画。从暂停的时间点重新开始动画。

pauseResume()

切换动画的暂停和恢复状态。

reset()

重置动画。将显示值重置为起始值，并取消当前的requestAnimationFrame。

方法完整使用示例

//template
<div>
  <Vue3NumberScroll 
    :start-val="0"  <!-- 动画开始的初始值 -->
    :end-val="10000"  <!-- 动画结束的目标值 -->
	ref="numberScrollRefBasic"
  />
</div>

//script
const numberScrollRefBasic = ref(null);

可以在特定时机触发实例上的方法,示例如下
    <a-button type="primary" @click="startBasic">开始</a-button>
    <a-button type="primary" @click="pauseBasic" danger>暂停</a-button>
    <a-button @click="resumeBasic">重置</a-button>

可以通过实例来触发暴露出来的方法
   const startBasic = () => {
     numberScrollRefBasic.value.start();
   };
   const pauseBasic = () => {
     numberScrollRefBasic.value.pause();
   };
   const resumeBasic = () => {
     numberScrollRefBasic.value.resume();
   };