vue-input-number 
A custom input number component for Vue.js 2.
Install
yarn add vue-input-number --dev
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.
minis only used as a placeholder ifplaceholderis 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
placeholderhas some value thenminis 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 useform-controlclass in the input element.
Events
@onInputNumberChange
Event is fired when value is changed.
License
MIT license
© 2018 José Luis Quintana
7 Dec 14, 2022
0 May 9, 2022
18 Jun 15, 2022
66 Jan 10, 2022
0 Apr 20, 2021
5 Nov 19, 2021
8.2k Dec 29, 2022
14 Sep 15, 2022
1.6k Dec 29, 2022
18 Nov 14, 2022
1 May 25, 2022
4 Dec 9, 2021
11 Nov 21, 2021
22 Dec 18, 2022
41 Nov 4, 2022
451 Dec 27, 2022
428 Dec 29, 2022
86 Nov 13, 2022
12 Oct 12, 2022