快捷導(dǎo)航

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

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

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

介紹

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

效果

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

安裝

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

npm i vue-countup-v3

屬性

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

事件

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

配置項(xiàng)

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

完整樣例

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

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

您可能感興趣的文章: