@mtcmedia/vue-number-input

Install to production site

npm install @mtcmedia/vue-number-input

Usage

import MNumberInput from '@mtcmedia/vue-number-input'
import '@mtcmedia/vue-number-input/dist/MtcNumberInput.css'

Vue.component('MNumberInput', MNumberInput)

<MNumberInput
    :min="18"
>
    <template v-slot:add><i class="fa fa-angle-up"></i></template>
    <template v-slot:subtract><i class="fa fa-angle-down"></i></template>
</MNumberInput>

Props

The component accepts these props:

Attribute	Type	Default	Description
input-class	String	''	Used to add class to the input field
id	String	''	Add id to input field
name	String	''	Add name to input field
value	Number, String	0	Add initial value to input field on load with v-model on component
min	Number	0	Set min value for input field
max	Number	Infinity	Set max value for input field
autocomplete	String	''	Add autocomplete
readonly	String	''	Add readonly
disabled	String	''	Add disabled
maxlength	Number	''	Add maxlength

Slots

The component accepts these slots:

• add : Slot to add a custom icon/content for the add button
• subtract : Slot to add a custom icon/content for the subtract button

Events

The component fires the following events:

Attribute	Description
input	Emits value of input to parent component

To emit event to DOM

// add this line before for legacy js e.g. jQuery
window.vueEventBus = new Vue()

// this as a method on the parent component
emitEvent (value, oldValue) {
    // legacy jquery event - sends event to the DOM
    window.vueEventBus.$emit('numberInput', {
        value: value,
        oldValue: oldValue,
        $el: this.$el
    })
}

Development Setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.