vue-countTo是一個無依賴,輕量級的vue組件,可以自行覆蓋easingFn。
你可以設置 startVal 和 endVal,它會自動判斷計數或倒計時。支持vue-ssr。vue-countTo參考於countUp.js;
安裝使用:
npm install vue-count-to
例子:
<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <script> import countTo from 'vue-count-to'; export default { components: { countTo }, data () { return { startVal: 0, endVal: 2017 } } } </script>
使用CDN腳本: demo
選項
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 |