vue 數字滾動插件

vue-countTo是一個無依賴，輕量級的vue組件。你可以設置 startVal 和 endVal，它會自動判斷計數或倒計時。支持vue-ssr。vue-countTo參考於countUp.js;

安裝：npm install vue-count-to

具體組件的使用：

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo>
</template>
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        // 需要滾動的時間
        duration: 5000,
        // 初始值
        startVal: 0,
        // 最終值
        endVal: 2018
      }
    }
  }
</script>

組件具體配置信息：

 

 

 

 

 

 

Property Description type default
startVal 開始值 Number 0
endVal 結束值 Number 2017
duration 持續時間，以毫秒為單位 Number 3000
autoplay 自動播放 Boolean true
decimals 要顯示的小數位數 Number 0
decimal 十進制分割 String .
separator 分隔符 String ,
prefix 前綴 String ''
suffix 后綴 String ''
useEasing 使用緩和功能 Boolean true
easingFn 緩和回調 Function —
　　** 注意：當autoplay：true時，它將在startVal或endVal更改時自動啟動**

　功能
Function Name Description
mountedCallback 掛載以后返回回調
start 開始計數
pause 暫停計數
reset
重置countTo

　更多例子：demo

 以上表格配置信息做起來太耗時，所以借鑒了‘放晴的天空’博主部分文章內容，地址：https://www.cnblogs.com/tuspring/p/9801603.html