v-countup

vue2 countup

vue 数字动画

Installation

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
        };
    }
}

<VCountup :delay="500" :simplify="true" :unit="unit" :endVal="integratedEndVal" :mainStyle="mainStyle" :countStyle="countStyle">
    <span slot="leftText">原始数据:&nbsp;{{ integratedEndVal }}&nbsp;=>&nbsp;</span>
    <span slot="rightText">&nbsp;times</span>
</VCountup>

API

Table Attributes

属性	说明	类型	参数	默认值
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+']]