animate-number
animate-number
基于 Vue 的数字滚动组件,支持小数 / 千分位,监听数值变化自动变化 👏

安装 Install
# npm
npm install animate-number
# yarn
yarn add animate-number
参数 Params
| Property | Property | Type | Default |
|---|---|---|---|
| value | 数值 | Number | 0 |
| during | 动画时长(毫秒) | Number | 500 |
| digits | 小数位 | Number | 0 |
| comma | 是否使用千分位 | Boolean | false |
| fps | 帧率 | Number | 20 |
使用 Using
1. 局部使用
import animateNumber from 'animate-number'
export default {
name: 'app',
components: {
animateNumber
},
data () {
return {
value: 10000
}
}
}
<template>
<div>
<animate-number :value="value"></animate-number>
</div>
</template>
2. 全局使用
// in main.js
import animateNumber from 'animate-number'
Vue.use(animateNumber)
<template>
<div>
<animate-number :value="value"></animate-number>
</div>
</template>
Related Packages
vue-animate-onscroll
A simple Vue directive that animates elements as they scroll into view.
18,044
116
@neeravp/vue-3-animate-in-view
Vue3 Directive & Component to animate elements as they appear in viewport
1,748
2
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.0.2 | ^2.5.11 | MIT | |
| 0.0.1 | ^2.5.11 | MIT |