[vue3從0動(dòng)態(tài)滾動(dòng)到指定數(shù)字](animated-number-vue3 - npm (npmjs.com)
)

image.png

1.安裝

$ npm install animated-number-vue3

$ yarn add animated-number-vue3

2.在main.js中引入

import AnimatedNumber from 'animated-number-vue3'
app.use(AnimatedNumber)

3.具體使用

3.1簡(jiǎn)單模式

<AnimatedNumber :from="0" :to="1000"></AnimatedNumber>

3.2 slot模式

//也可使用插槽來(lái)自定義界面等操作，option為整個(gè)動(dòng)效包含內(nèi)容的對(duì)象，
//item里面包含變動(dòng)的數(shù)字，當(dāng)from和to傳的是一個(gè)數(shù)字時(shí)，為單數(shù)字動(dòng)效，此時(shí)值必須為number
<AnimatedNumber :from="0" :to="1000">
  <template #default="{ option, item }">
    <h1>{{ item.number }}</h1>
  </template>
</AnimatedNumber>

3.3 復(fù)雜模式 如果想一次性為多個(gè)數(shù)字做動(dòng)效，此插件也提供插槽來(lái)自定義，from和to的對(duì)象key必須為一樣，一個(gè)開始一個(gè)結(jié)束的值

<AnimatedNumber :from="{
  number1:0,
  number2:0
}" :to="{
  number1:100,
  number2:100
}">
  <template #default="{ option, item }">
    <h1>{{ item.number1 }}</h1>
    <h1>{{ item.number2 }}</h1>
  </template>
</AnimatedNumber>