- Notifications
You must be signed in to change notification settings - Fork27
Number input component with controls
License
NotificationsYou must be signed in to change notification settings
JayeshLab/vue-numeric-input
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Number input component based on Vue that is a replacement of native input number with optional control.
Install via NPM
$ npm install vue-numeric-input --save
Install via CDN
<scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://unpkg.com/vue-numeric-input"></script>
Register VueNumericInput globally:
importVuefrom'Vue';importVueNumericInputfrom'vue-numeric-input';Vue.use(VueNumericInput)
Include the VueNumericInput directly into your component using import:
importVueNumericInputfrom'vue-numeric-input'exportdefault{components:{ VueNumericInput}}
<template><div><vue-numeric-inputv-model="value":min="1":max="10":step="2"></vue-numeric-input></div></template><script>exportdefault{data(){return{value:1,};},};</script>
| 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 |
| 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) |
| Method | Description | Parameters |
|---|---|---|
| focus | focus the Input component | - |
| blur | blur the Input component | - |
Inspired byreact-numeric-input
MIT
About
Number input component with controls
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.