Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xlsdg/vue-odometer
Vue.js(v2.x+) component wrap for Odometer.js
https://github.com/xlsdg/vue-odometer
odometer vue vue-component vue-odometer
Last synced: 3 months ago
JSON representation
Vue.js(v2.x+) component wrap for Odometer.js
- Host: GitHub
- URL: https://github.com/xlsdg/vue-odometer
- Owner: xlsdg
- License: mit
- Created: 2017-01-04T01:05:50.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-20T13:12:39.000Z (over 5 years ago)
- Last Synced: 2024-04-24T22:01:26.410Z (10 months ago)
- Topics: odometer, vue, vue-component, vue-odometer
- Language: JavaScript
- Homepage: http://github.hubspot.com/odometer/docs/welcome/
- Size: 118 KB
- Stars: 63
- Watchers: 0
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-odometer
> Vue.js(v2.x+) component wrap for Odometer.js
## Installation
``` bash
$ npm install --save odometer vue-odometer
```
## Usage
``` vue
import IOdometer from 'vue-odometer';
import 'odometer/themes/odometer-theme-default.css';
export default {
name: 'view',
components: {
IOdometer
},
data() {
return {
num: 999999
};
},
mounted() {
const that = this;
setInterval(function() {
that.num += 1;
}, 3000);
}
};
.iOdometer {
font-size: 2em;
margin: 0;
}
```
## Properties
* `value` **[Number]**
Optional; `0` by defualt.
* `format` **[String]**
Optional;
* `theme` **[String]**
Optional; `default` by defualt.
* `duration` **[Number]**
Optional;
* `animation` **[String]**
Optional;
* `formatFunction` **[Function]**
Optional;
See more [Odometer.js](http://github.hubspot.com/odometer/)
## Methods
* `renderInside`
* `watchForMutations`
* `startWatchingMutations`
* `stopWatchingMutations`
* `cleanValue`
* `bindTransitionEnd`
* `resetFormat`
* `renderDigit`
* `formatDigits`
* `insertDigit`
* `addDigit`
* `addSpacer`
* `animate`
* `animateCount`
* `getDigitCount`
* `getFractionalDigitCount`
* `resetDigits`
* `animateSlide`
* `render`
* `update`
Learn more [Odometer.js](http://github.hubspot.com/odometer/)
# License
MIT