Numeric Input Component For Vue.js

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.

  • @input: triggers when input
  • @change: triggers when the value changes
  • @blur: triggers when Input blurs
  • @focus: triggers when Input focus

Preview:

Numeric Input Component For Vue.js

Changelog:

v2.0.0 (09/29/2021)

  • New version 2.0.0 with bug fixes and added features

Download Details:

Author: JayeshLab

Live Demo: https://jayeshlab.github.io/vue-numeric-input/

Download Link: https://github.com/JayeshLab/vue-numeric-input/archive/master.zip

Official Website: https://github.com/JayeshLab/vue-numeric-input

Install & Download:

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

Add Comment