Vue3數(shù)字滾動插件vue-countup-v3的使用

更新時間：2023年10月30日 10:05:44 作者：I'm Jie

vue-countup-v3 插件是一個基于 Vue3 的數(shù)字動畫插件，用于在網(wǎng)站或應用程序中創(chuàng)建帶有數(shù)字動畫效果的計數(shù)器，本文主要介紹了Vue3數(shù)字滾動插件vue-countup-v3的使用，感興趣的可以了解一下

介紹

vue-countup-v3 插件是一個基于 Vue3 的數(shù)字動畫插件，用于在網(wǎng)站或應用程序中創(chuàng)建帶有數(shù)字動畫效果的計數(shù)器。通過該插件，我們可以輕松地實現(xiàn)數(shù)字的遞增或遞減動畫，并自定義其樣式和動畫效果。該插件可以用于許多場景，例如展示網(wǎng)站頁面的訪問量，展示應用程序的下載量，以及展示任何需要動態(tài)展示數(shù)字的場景等。

效果

該插件支持更多的參數(shù)自定義，比如數(shù)字的樣式、動畫的播放方向、循環(huán)播放等等。通過這些參數(shù)，可以實現(xiàn)更加豐富的數(shù)字動畫效果。一個簡單的效果如下：

安裝

使用該插件需要安裝依賴，可以通過 npm 命令進行安裝：

npm i vue-countup-v3

屬性

屬性	類型	默認值	描述
endVal	Number \| String	-	結(jié)束值
startVal	Number \| String	0	起始值
duration	Number	2.5	動畫時長，單位：秒
decimalPlaces	Number	0	小數(shù)點位數(shù)
autoplay	Boolean	true	是否自動計數(shù)
loop	Boolean \| Number	false	循環(huán)次數(shù)，有限次數(shù) / 無限循環(huán)
delay	Number	0	loop 循環(huán)的間隔時間，單位：秒
options	Object	-	配置項

事件

時間	描述	返回值
@init	CountUp 實例初始化完成觸發(fā)	CountUp 實例
@finished	計數(shù)結(jié)束時觸發(fā)	-

配置項

配置項	類型	默認值	描述
startVal	number	0	開始數(shù)值
decimalPlaces	number	0	小數(shù)點位數(shù)
duration	number	2	動畫時長，單位：秒
useGrouping	boolean	true	是否使用千位分隔符）顯示
useIndianSeparators	boolean	false	是否使用印度數(shù)位分隔符
useEasing	boolean	true	是否開啟數(shù)字增加過程中的緩動方式
smartEasingThreshold	number	999	設置一個閾值用于調(diào)整數(shù)字計數(shù)器的動畫效果
smartEasingAmount	number	0.5	控制著數(shù)字變化的緩動效果
separator	string	,	千分位分隔符
decimal	string	.	小數(shù)點分隔符
easingFn	number	easeOutExpo	用于控制數(shù)字變化的緩動函數(shù)
formattingFn	string	-	用于格式化計數(shù)器的值
prefix	string	-	數(shù)值前綴
suffix	string	-	數(shù)值后綴
numerals	string[]	-	數(shù)字符號替換 0 - 9
enableScrollSpy	boolean	true	在可視范圍內(nèi)才開始動畫
scrollSpyDelay	number	50ms	目標進入可視范圍內(nèi)后的延遲時間(毫秒)
scrollSpyOnce	boolean	false	滾動到該元素時執(zhí)行數(shù)字滾動動畫是否執(zhí)行一次
onCompleteCallback	-	-	回調(diào)函數(shù)，可以在計數(shù)結(jié)束時執(zhí)行
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>

到此這篇關于Vue3數(shù)字滾動插件vue-countup-v3的使用的文章就介紹到這了,更多相關Vue3 vue-countup-v3 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: