Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xlsdg/vue-countup-v2
Vue.js component wrap for countUp.js
https://github.com/xlsdg/vue-countup-v2
countup vue vue-component vue-countup
Last synced: 3 months ago
JSON representation
Vue.js component wrap for countUp.js
- Host: GitHub
- URL: https://github.com/xlsdg/vue-countup-v2
- Owner: xlsdg
- License: mit
- Created: 2017-01-03T12:49:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-14T10:36:00.000Z (over 2 years ago)
- Last Synced: 2024-05-15T13:26:06.541Z (6 months ago)
- Topics: countup, vue, vue-component, vue-countup
- Language: Vue
- Homepage: https://inorganik.github.io/countUp.js/
- Size: 85.9 KB
- Stars: 376
- Watchers: 4
- Forks: 56
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-countup-v2
> Vue.js component wrap for CountUp.js
## Installation
```bash
$ npm install --save countup.js vue-countup-v2
```
## Usage
``` vue
import ICountUp from 'vue-countup-v2';
export default {
name: 'demo',
components: {
ICountUp
},
data() {
return {
delay: 1000,
endVal: 120500,
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
}
};
},
methods: {
onReady: function(instance, CountUp) {
const that = this;
instance.update(that.endVal + 100);
}
}
};
.iCountUp {
font-size: 12em;
margin: 0;
color: #4d63bc;
}
```
## Properties
* `delay` **[Number]**
Optional;
* `endVal` **[Number]**
Required; The value you want to arrive at.
* `options` **[Object]**
Optional; Formatting/easing options object.
See more [countUp.js](https://github.com/inorganik/countUp.js)
## Static Methods
* `start`
* `pauseResume`
* `reset`
* `update`
Learn more [countUp.js](https://github.com/inorganik/countUp.js)
## License
MIT