https://github.com/kaangokdemir/vue-input-spinner
Vue 2.x component for spinning inputs
https://github.com/kaangokdemir/vue-input-spinner
Last synced: 3 months ago
JSON representation
Vue 2.x component for spinning inputs
- Host: GitHub
- URL: https://github.com/kaangokdemir/vue-input-spinner
- Owner: kaangokdemir
- Created: 2020-02-20T12:17:06.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T02:59:00.000Z (almost 2 years ago)
- Last Synced: 2025-02-15T19:41:31.026Z (3 months ago)
- Language: Vue
- Homepage: https://vue-input-spinner.netlify.com
- Size: 768 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Input Spinner
> Vue 2.x component for spinning inputs
[](https://nodei.co/npm/vue-input-spinner/)
[](https://opensource.org/licenses/MIT) [](https://www.npmjs.org/package/vue-input-spinner) [](https://www.npmjs.com/package/vue-input-spinner) [](https://www.npmjs.com/package/vue-input-spinner)
## Demo
[https://vue-input-spinner.netlify.com/](https://vue-input-spinner.netlify.com/)
## Installation
```bash
# Yarn
yarn add vue-input-spinner
```
```bash
# NPM
npm i vue-input-spinner
```
## How to use
### Import at individual .vue files
```javascript
import VueInputSpinner from 'vue-input-spinner'
export default {
components: {
VueInputSpinner
},
// ...
};
```
### Or register as a global component
```javascript
import Vue from 'vue'
import VueInputSpinner from 'vue-input-spinner'
Vue.use(VueInputSpinner)
/* Or you can set options */
Vue.use(VueInputSpinner, {
buttonClass: 'fancy-class',
minValue: 10,
editable: false,
// ...
})
```
### Template
```html
```
#### or use with props
```html
```
### Available Props
| Attribute | Type | Default | Description |
|-------------------|------------------|-------------------|---------------------------------------------------------------- |
| :value | Number | 0 | Value for binding |
| :minValue | Number | 0 | Minimum value |
| :maxValue | Number | 10**1000 | Maximum value (default infinite) |
| :step | Number | 1 | Step between increase and decreases |
| :inputClass | String | vis-default-input | width: 50px; height: 50px; text-align: center; font-size: 24px; |
| :buttonClass | String | vis-default-button| width: 50px; height: 50px; |
| :buttonLeftClass | String | "" | This will overwrite buttonClass |
| :buttonRightClass | String | "" | This will overwrite buttonClass |
| :buttonLeftText | String | - | Text in left button |
| :buttonRightText | String | + | Text in right button |
| :editable | Boolean | true | Toggling this converts input into a label |
| :readonly | Booelan | false | Readonly input |
### Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request
### Contributors
Kaan Gökdemir - Author ([@kaangokdemir](https://twitter.com/kaangokdemir)) - [kaangokdemir.com](https://kaangokdemir.com)
### License
MIT