🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Form

Documentation

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
size Component Size String Inherit size in px, em, rem etc e.g. '20px'
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

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


You May Also Like