Vue Numeric Input


Number input component based on Vue that is a replacement of native input number with optional control.

!vue-numeric-input

Live Demo & Doc

$3

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
}
}
`

$3

#### Basic usage

`html



``

#### 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

License

MIT