Vue Numeric Input

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

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