A custom input number component for Vue.js 2

Last update: Jul 24, 2022

vue-input-number npm npm JavaScript Style Guide

A custom input number component for Vue.js 2.

Install

Yarn

yarn add vue-input-number --dev

NPM

npm install vue-input-number --save-dev

Prerequisites

Usage

<template>

    <input-number
        :step="1"
        :min="10"
        :max="100"
        :maxlength="3"
        :inputclass="'v-input-number-input'"
        @onInputNumberChange="onChange"></input-number>

</template>

<script>
  export default {
    methods: {
        onChange (value) {
            console.log(value)
        }
    }
  }
</script>

In your entry app:

const Vue = require('vue')

Vue.component('vue-input-number', require('vue-input-number'))

const app = new Vue({
  el: '#app'
})

For more detailed example check out the app directory.

Attributes

  • value: Add a default value to input.
  • step: Step value for increment and decrement the input number value.
  • min: Minimum value for input number. min is only used as a placeholder if placeholder is empty.
  • max: Maximum value for input number.
  • maxlength: Maxlength for the input number.
  • keydown: Enable keydown for increment or decrement value.
  • mousedown: Enable mousedown for increment or decrement value.
  • integer: Enable integer value only.
  • placeholder: Set a input placeholder. If placeholder has some value then min is not used as a placeholder.
  • inputclass: Set a diferent class for the input element. For example, if you use Bootstrap default input class you can set :inputclass="'form-control'" to use form-control class in the input element.

Events

@onInputNumberChange

Event is fired when value is changed.

License

MIT license

© 2018 José Luis Quintana

GitHub

https://github.com/joseluisq/vue-input-number
You might also like...

A Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

May 9, 2022

Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

Jun 15, 2022

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Jan 10, 2022

A tags input component for VueJS

A tags input component for VueJS

Apr 20, 2021

Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Nov 19, 2021

Input mask for React, Angular, Ember, Vue, & plain JavaScript

Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Aug 17, 2022

🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Jul 28, 2020

Tiny (2k gzipped) and dependency free mask input for Vue.js

Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Aug 15, 2022

Easy input of currency formatted numbers for Vue.js.

Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (currenc

Aug 6, 2022
Comments
  • 1. Default value not :min

    Hehe sorry bothering again, related to the merged PR with :placeholder improvement, emerged another issue: default value is taken from min default data, and in my case it is not showing the placeholder, just if I delete the min value but it re-appears:

    mar-19-2018 11-48-07

    Reviewed by juanbrujo at 2018-03-19 14:56
  • 2. Added: inputclass prop to specify a diferent class name for the input…

    This gives the ability to input element use a different class than default one. Made this change in order that I can use with Bootstrap default class, which is usually given by <input class="form-control">

    Reviewed by morsapt at 2018-06-16 16:47
  • 3. How do i get the value from external js ?

    Hello! Excuse me, how can i access the value from parent js-file? i importing your component like this

    var app = new Vue({
    	el: '#app',
    	components: {
    		'counter': vueNumber
    	},
    

    am i doing something wrong? Thank you.

    Reviewed by atomeon at 2019-03-01 12:58
  • 4. Decimal issue, not all countries are using "." for decimal

    What about for example "4,6" instead of "4.6". Also a problem with length. If you want to have a decimal number and say like this:

    min = 1 max = 300 length = 4

    and then type in 400 it is only changed to max when you do blur, and second if you want a number with three digits and dot you have to put in length 4 because "." is also taken into consideration.

    Like some big bugs. You should look into that.

    Reviewed by goors at 2018-05-10 11:15
Vue Currency Input component allows an easy input of currency formatted numbers
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

May 25, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Nov 21, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Jul 28, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

Aug 1, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Jul 25, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

Jul 28, 2022
A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Jun 9, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Aug 8, 2022