joseluisq/vue-input-number

A custom input number component for Vue.js 2

vue-input-number

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

• Vue.js 2

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

vue-input-number's Issues

Create new prop 'value'

Hi. Can we create a new prop 'value' to initialize input with that value? Like that - https://codepen.io/Baronkoko/pen/GGEdNd

You can type in number input "...."

You can type in number input "...." or 4.4.4, doas not make any sense. So as far as i can see this is like really buggy plugin.

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:

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.

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.

set step=0.7 then get wrong data

I set the step length to 0.7, set the initial value to 1, click add button for twice, get the wrong data。
Forgive my weak English

Looking for maintainer

I don't have time to maintain this project. If someone is interested on it. Let me to know.

How to set default value?

My model default value is 100 and component takes min value instead of that.

Placeholder?

How can I add a placeholder to the input?