[vue3从0动态滚动到指定数字](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简单模式
<AnimatedNumber :from="0" :to="1000"></AnimatedNumber>
3.2 slot模式
//也可使用插槽来自定义界面等操作，option为整个动效包含内容的对象，
//item里面包含变动的数字，当from和to传的是一个数字时，为单数字动效，此时值必须为number
<AnimatedNumber :from="0" :to="1000">
<template #default="{ option, item }">
<h1>{{ item.number }}</h1>
</template>
</AnimatedNumber>
3.3 复杂模式 如果想一次性为多个数字做动效，此插件也提供插槽来自定义，from和to的对象key必须为一样，一个开始一个结束的值
<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>
