Integer input with increment and decrement buttons

Live demo here

This component fits as spinbutton, allowing keyboard functionalities (up/down arrows or page up/down to increment/decrement, home/end to min/max)

• npm install

npm install --save vue-integer-plusminus 

• import components

import { IntegerPlusminus } from 'vue-integer-plusminus' 

• declare use or imported components in your vue script

export default { components: { IntegerPlusminus }, methods: ... } 

• Use components as described below

<integer-plusminus></integer-plusminus> 

<integer-plusminus :min="ipm_min" :max="ipm_max" :step="ipm_step" :vertical="ipm_vertical" :disabled="imp_disabled" formName="integer_plus_minus" v-model="ipm_value"> <p>Your value is</p> {{ ipm_value }} <template slot="decrement">{{ ipm_slot_decr }}</template> <template slot="increment">{{ ipm_slot_incr }}</template> </integer-plusminus> 

This component provide 3 slots

• Default slot is the middle part when value is usually displayed
• 'increment' slot is used for increment button. Usually on right for horizontal layout, or top for vertical layout.
• 'decrement' slot is used for decrement button. Usually on left for horizontal layout, or bottom for vertical layout.

Style could be overwritten using !important css keyword

.int-input-increment { background: #5CB85C !important; } 

Events:

• 'input' on value change
• 'ipm-increment' on value increment
• 'ipm-decrement' on value decrement

• Fork the repository
• Run npm install
• You can run npm run dev, site is at http://localhost:8081.
• Do your stuff
• When you're done, run npm run build command and commit your work for a pull request.