一、CountTo
vue-countTo是一個無依賴嚼摩，輕量級的vue組件壹瘟，可以自行覆蓋easingFn。
你可以設置 startVal 和 endVal银室，它會自動判斷計數或倒計時涂佃。支持vue-ssr。
示例地址： http://panjiachen.github.io/countTo/demo/
二蜈敢、插件安裝
npm install vue-count-to
三辜荠、示例
<template>
<div class="hello">
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</div>
</template>
<script>
// 引入插件
import countTo from "vue-count-to";
export default {
components: { countTo },
data() {
return {
startVal: 0,
endVal: 2017
};
}
};
</script>
顯示
四、參數選項
選項
| 屬性 | 描述 | 類型 | 默認值 |
|---|---|---|---|
| startVal | 開始值 | Number | 0 |
| endVal | 結束值 | Number | 2017 |
| duration | 持續(xù)時間抓狭，以毫秒為單位 | 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更改時自動啟動**
功能
| 函數名 | 描述 |
|---|---|
| mountedCallback | 掛載以后返回回調 |
| start | 開始計數 |
| pause | 暫停計數 |
| reset | 重置countTo |
