Vue2Input

Vue2Input Component for Vue 2.x

Install

    npm install vue2-input --save

Demo

For demo, please see this fiddle

Usage

1. Import the component

import Vue2Input from 'vue2-input';
import {Vue2InputGroup} from 'vue2-input';

2.1 Use it globally

Vue.use(Vue2Input);

2.2 Or use it locally

components: {
    'vue2-input': Vue2Input,
    'vue2-input-group': Vue2InputGroup,
},

3. Update your app or template:

<div>
...
<vue2-input></vue2-input>
...
</div>

Properties / Methods

Vue2Input

• Properties

  • type: text, email, url, textarea, select, checkbox, radio, ...

  • label: field caption

  • name: optional (for validation)

  • placeholder

  • required

  • horizontal: col-sm-2 col-md-3, etc for horiz layout

  • help: help text underneath

  • min: min length

  • max: max length

  • scope: scope for vee-validate (if two fields have same name)

  • rows: textarea

  • options: checkbox, select, radio (options => [{label: label, value: value}, ..] or ['val', 'val'..]

  • inline: true (place checkbox, radios horizontally)

  • fixed: fixed checkbox fields (array)

  • readonly

  • labelClass, inputClass, controlClass:

  • size: sm, lg (for form-control-sm)

  • yes-no: radio, select ['enabled', 'disabled'] => options => [{label: 'enabled', value: true}, {label: 'disabled', value: false}]

  • default: sets defaults value of model

  • prepend: prepends text in front of text, textarea

  • append: appends text in after of text, textarea

  • disabled

• Methods:

  • validate: returns promise

Vue2InputGroup:

• Properties

  • disabled: Disables entire group of fields by putting a white overlay on top

• Methods:

  • validate: returns promise after validating all fields contained inside group

  • getAllChildren: returns array with all vue2-input fields (even nested)

Example

Please see App.vue for example use.

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build