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/
Stars: ✭ 954
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
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 Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (-1.26%)
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
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
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:
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].