Number Input Component With Controls For Vue.js

Number input component based on Vue which is a replacement for the original input number with optional control.

numeric input material ui, numeric input react native, numeric input html, react native numeric input example, carbon number input, number input ui, numeric input npm

Table of Contents

How to make use of it:

Install and download:

# NPM
$ npm install vue-numeric-input --save

1. Import and register the digital input component.

import Vue from 'Vue';
import VueNumericInput from 'vue-numeric-input';

// global
Vue.use(VueNumericInput);
// local
export default {
  components: {
    VueNumericInput
  }
}

2. Add the digital input to the template.

<vue-numeric-input  v-model="value" :min="1" :max="100" :step="1"></vue-numeric-input>

3. Possible props.

name: String,
value: [String, Number],
placeholder: String,
min: {
  type: Number,
  default: Number.MIN_SAFE_INTEGER
},
max: {
  type: Number,
  default: Number.MAX_SAFE_INTEGER
},
step: {
  type: Number,
  default: 1
},
align: {
  type: String,
  default: "left"
},
width: {
  type: String
},
size: {
  type: String,
  default: "normal",
  validator: value => {
    return ["small", "normal", "large"].includes(value);
  }
},
precision: {
  type: Number,
  validator(val) {
    return val >= 0 && Number.isInteger(val);
  }
},
autofocus: {
  type: Boolean,
  default: false
},
readonly: {
  type: Boolean,
  default: false
},
disabled: {
  type: Boolean,
  default: false
},
controls: {
  type: Boolean,
  default: true
},
controlsType: {
  type: String,
  default: "plusminus"
},
mousewheel: {
  type: Boolean,
  default: false
},
isInput: {
  type: Boolean,
  default: true
},
className: {
  type: String,
  default: null
}

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)