Numeric Input Component For Vue.js

Install & Download:

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

Description:

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

How to use it:

1. Import and register the numeric input component.

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

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

2. Add the numeric 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
}

4. Events.