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

<template>
    <div>
        <form @submit.prevent="check('step1')" novalidate>
            <vue2-input type="textarea" rows="3" v-model="value.text" label="Your site name:" placeholder="My site" required min="3" help="(this is a test)" scope="step1"></vue2-input>
            <vue2-input type="email" v-model="value.email" label="Your email:" placeholder="My email" required help="(this is a test)" scope="step1"></vue2-input>
            <vue2-input type="password" v-model="value.password" label="Your password:" placeholder="Strict" required help="(this is a test)" scope="step1" :strict-password="true"></vue2-input>

            <vue2-input type="radio" required name="ok" v-model="value.radio" scope="step1"></vue2-input>
            <vue2-input type="checkbox" required :options="[{label: 'one', value: 1},{label: 'two', value: 2},]" v-model="value.checkbox" label="sure?" scope="step1"></vue2-input>
            <vue2-input type="checkbox" required :options="[{label: 'yes', value: true}]" v-model="value.agree" label="agree?" scope="step1"></vue2-input>
            <vue2-input type="select" required :options="[{label: 'one', value: 1},{label: 'two', value: 2},]" v-model="value.select" scope="step1"></vue2-input>


            <div class="card card-body">
                <p>Horizontal</p>

                <vue2-input type="text" horizontal="col-sm-3" v-model="value.text1" label="Your site name 2:" placeholder="My site" required min="3" help="(this is a test)" scope="step1"></vue2-input>
                <vue2-input type="radio" :inline="false" required="" horizontal="col-sm-3" v-model="value.radio1" label="Yes or no?" scope="step1" help="that is the question"></vue2-input>
            </div>

            <hr>

            <button class="btn btn-primary" :disabledd="errors.any('step1')">btn</button>

        </form>

        <pre>value: {{value}}</pre>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VeeValidate from 'vee-validate';
    import Vue2Input from '../src/index';

    Vue.use(VeeValidate);

    import './validator';

    export default {
        name: 'app',
        data() {
            return {
                value: {}
            }
        },
        components: {
            Vue2Input
        },
        methods: {
            check() {
                this.$validator.validateAll('step1')
                    .then((obj) => console.log("result: ", obj))
                    .catch((err) => console.log("error: ", err));
            }
        },
    }
</script>

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