vue2 countup

vue 数字动画

$3

``
npm install v-countup --save
`

`
import VCountup from 'v-countup'

export default {
name: 'example',
components: {
VCountup
},
data () {
return {
mainStyle: {
fontSize: '30px'
},
countStyle: {
fontSize: '50px',
color: '#dc9387'
},
unit: [[1, '十多'], [2, '百多'], [3, '千多'], [4, '万多'], [5, '十万多'], [6, '百万多'], [7, '千万多'], [8, '亿多']],
integratedEndVal: 3
};
}
}


原始数据: {{ integratedEndVal }} => 
 times

``

API

$3

| 属性 | 说明 | 类型 | 参数 | 默认值 |
| ----------- | ------------------------ | ------- | -------- | ------------------------------------------------- |
| main-class | 样式名称 | String | - | - |
| main-style | 内联样式 | Object | - | {fontSize: '16px', fontWeight: 500,color: 'gray'} |
| count-style | 数字显示内联样式 | Object | - | - |
| init-count | 默认值 | Number | - | 0 |
| start-val | 开始值 | Number | - | 0 |
| end-val | 结束值 | Number | required | - |
| simplify | 是否自定义格式或简化格式 | Boolean | - | false |
| duration | 动画持续时间(秒) | Number | - | 2 |
| delay | 动画延迟(毫秒) | Number | - | 200 |
| uneasing | 禁止动画 | Boolean | - | false |
| ungroup | 禁止分隔 | Boolean | - | false |
| separator | 数字分隔符 | String | - | , |
| decimals | 小数分隔符 | String | - | . |
| unit | 自定义单位 | Array | - | [[3, 'K+'], [6, 'M+'], [9, 'B+']] |