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

A custom input number (input spinner) component for Vue.js 2.

Form

Documentation

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


You May Also Like