animated-number-vue3

安装

$ npm install animated-number-vue3
# OR
$ yarn add animated-number-vue3

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

<AnimatedNumber :from="0" :to="1000"></AnimatedNumber>
----------------------
<AnimatedNumber :from="0" :to="1000">
  <template #default="{ option, item }">
    <h1>{{ item.number }}</h1>
  </template>
</AnimatedNumber>
也可使用插槽来自定义界面等操作，option为整个动效包含内容的对象，item里面包含变动的数字，当from和to传的是一个数字时，为单数字动效，此时值必须为number

如果想一次性为多个数字做动效，此插件也提供插槽来自定义
<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>

from和to的对象key必须为一样，一个开始一个结束的值

Props

组件的props定义

| Prop Name | Type | Description | | ------------------- | ------ | ---------------------------------------------------------------------------------------------------------- | | type | String | 默认为single multiple | | to | Number | 动效结束完的值，默认为0 | | from | Number | 动效初始化的值，默认为0 | | round | Number | 默认为1 | | easing | String | 默认为linear | duration | Number |动效时间 默认1000 |options|Number|扩展，依赖于animejs

github