vue3-number-scroll v0.1.12

vue3-number-scroll使用指南

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

描述

开始使用

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）

完整使用示例

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

方法（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();
   };