vue-numeric-input

Vue Numeric Input Component
60,622 75
Install
npm install vue-numeric-input
Latest Version:2.0.0
Vue:2
License:MIT
Last Updated:Apr 29, 2023
Links: GitHub  ·  npm
Maintainer: jayeshvachhani

Vue Numeric Input

npm npm Build Status codecov npm

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

vue-numeric-input

Live Demo & Doc

Installation

Install via NPM

$ npm install vue-numeric-input --save

Install via CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric-input"></script>
Global

Register VueNumericInput globally:

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

Vue.use(VueNumericInput)
Local

Include the VueNumericInput directly into your component using import:

import VueNumericInput from 'vue-numeric-input'

export default {
  components: {
    VueNumericInput
  }
}

Usage

Basic usage
<template>
  <div>
    <vue-numeric-input  v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
      };
    },
  };
</script>
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

Related Packages

vue-numeric

Input field component to display currency value based on Vue.

332,461 454
@handcrafted-market/vue3-numeric

Input field component to display currency value based on vue-numeric.

34,694 0
vue-numeric-currency

Input field component to display currency value based on Vue.

5,263 0
nettix-vue-numeric

Input field component to display currency value based on Vue.

559 2
@robin-rossow/vue-input-number

Input field component to display a formatted number value. It is meant to be use...

9,946 5

Version History

Version Released License
2.0.0 MIT
1.0.6 MIT
1.0.5 MIT
1.0.4 MIT
1.0.3 MIT