@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.