Question

import { Countup } from 'feui';
components: {
  [Countup.name]: Countup
},
data () {
  return {
    doStart: false,
    doReset: false,
    options: {
      useEasing: true,
      useGrouping: true,
      separator: '',
      decimal: '.',
      prefix: '￥',
      suffix: '元'
    }
  }
},
methods:{
  doResetFn:function(params) {
    this.doReset=true;
    this.doStart=false;
  },
  callback:function(ins){
    console.log(ins.endVal)
    Toast.success({
      duration: 1500,
      message: '滚完了'
    })
  },
  callback1:function(){
    Toast.success({
      duration: 1500,
      message: '点击成功鸟'
    })
  }
}

.demo1 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 6em;
  color: #4a90e2;
}

代码演示

基础用法(从小到大)

<fe-countup :start-val="1" :end-val="1388" 
  :duration="2" class="demo1">
</fe-countup>

倒着用见过没(从大到小)

<fe-countup :start-val="1388" :end-val="1" 
  :duration="2" class="demo1">
</fe-countup>

保留小数

<fe-countup :end-val="88.88" :duration="3" 
  :decimals="2" class="demo1">
</fe-countup>

开始/复位

<fe-countup :end-val="1024" :duration="3" 
  :start="doStart" class="demo1">
</fe-countup>
<br />
<div style="margin:20px;">
  <fe-button @click.native="doStart=true" 
  type="primary">Start</fe-button>
  <fe-button @click.native="doResetFn" 
  type="primary">Reset</fe-button>
</div>

综合Demo

<fe-countup :end-val="10000" :duration="1" 
  :decimals="2" class="demo1" 
  :options='options' :callback='callback'>
</fe-countup>

API

参数	说明	类型	默认值	可选值
start-val	开始的数字	Number	0	-
end-val	结束的数字	Number	0	-
duration	持续时间(秒)	Number	2	-
decimals	小数位数	Number	0	-
-	-	-	-	-

Options

参数	说明	类型	默认值	可选值
useEasing	是否使用缓动动画	Boolean	true	true,false
easingFn	缓动动画函数，useEasing为true才有效，可以是贝塞尔方程式推算的结果	Function	true	true,false
useGrouping	是否启用数字分组（用逗号隔开）	Boolean	true	true,false
separator	数字分组的显示值	String	,	-
decimal	小数点的取值（可自定义）	String	.	-
prefix	显示滚动数字前	String	-	-
suffix	显示滚动数字后	String	-	-
-	-	-	-	-

Methods

方法名	参数	说明	备注
start	-	是否自动开始计数	-
reset	-	复位/复原/福元	没错就是福元怎么了
-	-	-	-