vue-countTo-簡單好用的一個數字滾動插件


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM