Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jayeshlab/vue-numeric-input
Number input component with controls
https://github.com/jayeshlab/vue-numeric-input
input numeric vue vue-component vue-numeric-input vuejs
Last synced: 3 days ago
JSON representation
Number input component with controls
- Host: GitHub
- URL: https://github.com/jayeshlab/vue-numeric-input
- Owner: JayeshLab
- License: mit
- Created: 2018-08-08T18:23:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T01:33:26.000Z (over 1 year ago)
- Last Synced: 2024-10-11T00:08:06.741Z (about 1 month ago)
- Topics: input, numeric, vue, vue-component, vue-numeric-input, vuejs
- Language: HTML
- Homepage: https://jayeshlab.github.io/vue-numeric-input/index.html
- Size: 1.88 MB
- Stars: 77
- Watchers: 1
- Forks: 28
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Numeric Input
[](https://www.npmjs.com/package/vue-numeric-input)
[](https://www.npmjs.com/package/vue-numeric-input)
[](https://app.travis-ci.com/github/JayeshLab/vue-numeric-input)
[](https://codecov.io/gh/JayeshLab/vue-numeric-input)
[](http://opensource.org/licenses/MIT)
Number input component based on Vue that is a replacement of native input number with optional control.
[Live Demo & Doc](https://jayeshlab.github.io/vue-numeric-input/)
### Installation
Install via NPM
`$ npm install vue-numeric-input --save`
Install via CDN
```html
```
#### Global
Register VueNumericInput globally:
```javascript
import Vue from 'Vue';
import VueNumericInput from 'vue-numeric-input';
Vue.use(VueNumericInput)
```
#### Local
Include the VueNumericInput directly into your component using import:
```javascript
import VueNumericInput from 'vue-numeric-input'
export default {
components: {
VueNumericInput
}
}
```
### Usage
#### Basic usage
```html
export default {
data() {
return {
value: 1,
};
},
};
```
#### PROPS:
| Name | Description | Type | Default | Options |
| ----------- | --------------- | ------------ | ------------ | ------------ |
| name | Component name | String | - | - |
| value | Binding value | Number | - | - |
| placeholder | Input placeholder | String | - | - |
| min | Minimum allowed value | Number | -Infinity | - |
| max | Maximum allowed value | Number | Infinity | - |
| step | Incremental Step | Number | 1 | - |
| align | Alignment of Numeric Value | String | left | left, center, right |
| width | Component Width | String | 150px | width in px, em, rem etc e.g. ‘20px’ |
| size | Component Size | String | normal | size value can be 'small', 'normal', 'large' |
| precision | Number of decimals | Number | 0 | Integer value|
| controls | Enable/Disable Controls | Boolean | true | true/false|
| controlsType | Controls Type | String | plusminus | plusminus/updown|
| autofocus | Autofocus on Page Load | Boolean | false | true/false|
| readonly | Is Readonly | Boolean | false | true/false|
| disabled | Is Disabled | Boolean | false | true/false|
| isinput | enable/disable keyboard input of number | Boolean | false | true/false|
| mousewheel | Enable increment/decrement with mousewheel event | Boolean | false | true/false|
| className | Css Class for Input Component | String | - | css class name |
#### EVENTS:
Event Name | Description | Parameters
-----------|--------------------|--------------
input | triggers when input| (newValue)
change | triggers when the value changes| (newValue)
blur | triggers when Input blurs| (event: Event)
focus | triggers when Input focus| (event: Event)
#### METHODS:
Method | Description | Parameters
---|--- | ----
focus | focus the Input component| -
blur | blur the Input component| -
Inspired by [react-numeric-input](https://github.com/vlad-ignatov/react-numeric-input)
## License
MIT