Countup 数字滚动

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

Options

Methods