All Projects → PanJiaChen → Vue Countto

PanJiaChen / Vue Countto

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Countto

Vue Google Autocomplete
A Vue.js autosuggest component for the Google Places API.
Stars: ✭ 467 (-51.05%)
Mutual labels:  vue-component
Vue
Vue implementation of Geist
Stars: ✭ 725 (-24%)
Mutual labels:  vue-component
Vue Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (-1.26%)
Mutual labels:  vue-component
Vue2 Calendar
vue 2.x calendar component
Stars: ✭ 477 (-50%)
Mutual labels:  vue-component
Vue Pull To
⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件
Stars: ✭ 708 (-25.79%)
Mutual labels:  vue-component
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+620.55%)
Mutual labels:  vue-component
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (-53.56%)
Mutual labels:  vue-component
Vue Gh Corners
GitHub Corners for Vue.
Stars: ✭ 30 (-96.86%)
Mutual labels:  vue-component
Vue Qrcode
QR code component for Vue.js
Stars: ✭ 724 (-24.11%)
Mutual labels:  vue-component
V Distpicker
✨ A flexible, highly available district picker for picking provinces, cities and districts of China.
Stars: ✭ 919 (-3.67%)
Mutual labels:  vue-component
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (-46.65%)
Mutual labels:  vue-component
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (-25.89%)
Mutual labels:  vue-component
Vue Js Toggle Button
🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable
Stars: ✭ 836 (-12.37%)
Mutual labels:  vue-component
Vue Json Pretty
A JSON tree view component that is easy to use and also supports data selection.
Stars: ✭ 477 (-50%)
Mutual labels:  vue-component
Elementui Multiselect
基于element ui、vue的多选框,支持选项disabled,支持分页,输入框过滤,可显示或隐藏全选和清空项
Stars: ✭ 14 (-98.53%)
Mutual labels:  vue-component
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (-53.14%)
Mutual labels:  vue-component
Vue Flatpickr Component
Vue.js component for Flatpickr datetime picker 📆
Stars: ✭ 773 (-18.97%)
Mutual labels:  vue-component
Vue Async Modal
Flexible modal component for Vue with ability of asynchronous lazy loading
Stars: ✭ 30 (-96.86%)
Mutual labels:  vue-component
Vue Echarts V3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 884 (-7.34%)
Mutual labels:  vue-component
Vue Responsive Calendar
A responsive calendar component for Vue.js
Stars: ✭ 17 (-98.22%)
Mutual labels:  vue-component

vue-countTo

It's a vue component that will count to a target number at a specified duration

vue2 Gemnasium license npm npm minified gzip

vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself. You can set startVal and endVal ,it will automatic judge count up or count down. It is support vue-ssr. It is learn from countUp.js;

Try the demo

How to use?

npm install vue-count-to

Example

<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>

demo:

demo

Use CDN Script: demo

Options

Property Description type default
startVal the value you want to begin at Number 0
endVal the value you want to arrive at Number 2017
duration duration in millisecond Number 3000
autoplay when mounted autoplay Boolean true
decimals the number of decimal places to show Number 0
decimal the split decimal String .
separator the separator String ,
prefix the prefix String ''
suffix the suffix String ''
useEasing is use easing function Boolean true
easingFn the easing function Function

** notes: when autoplay:true , it will auto start when startVal or endVal change **

Functions

Function Name Description
mountedCallback when mounted will emit mountedCallback
start start the countTo
pause pause the countTo
reset reset the countTo
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].