Components

vc-easyclearinput

Install

npm install vc-easyclearinput --save
// build version
import vcEasyclearinput from 'vc-easyclearinput'
// recommend for *.vue project for small bundle size
import vcEasyclearinput from 'vc-easyclearinput/src/Easyclearinput.vue'
// commonjs
require('./dist/build.min.js')
// script tag
<script src='./dist/build.min.js'></script>

Usage

props

type

value

label

placeholder

infoText

disabled

readonly

autofocus

width

icon

status

onFocus

focus回调

onBlur

blur回调

onClear

onClear回调

example

import Vue from 'vue'
import vcEasyclearinput from '../src'
new Vue({
    el: '#app',
    data () {
        return {
            bools: {
                'true': true,
                'false': false
            },
            noSlot: true,
            label: 'label',
            type: "text",
            autofocus: true,
            disabled: false,
            readonly: false,
            value: 'content',
            placeholder: 'placeholder',
            infoText: '请输入正确的用户名',
            status: '',
            width: '400',
            icon: false,
            onInput: function () {
                console.log('onInput')
            },
            onChange: function (e) {
                console.log('onChange', e)
            },
            onClear: function () {
                console.log('onClear')
            },
            onFocus: function (e) {
                console.log('onFocus', e)
            },
            onBlur: function (e) {
                console.log('onBlur', e)
            }
        }
    },
    components: {
        vcEasyclearinput
    }
})
<vc-easyclearinput
    :type="type"
    :label="label"
    :placeholder="placeholder"
    :value.sync="value"
    :info-text="infoText"
    :autofocus="autofocus"
    :disabled="disabled"
    :readonly="readonly"
    :width="width"
    :icon="icon"
    :status="status"
    :on-clear="onClear"
    :on-focus="onFocus"
    :on-blur="onBlur"
    @input="onInput"
    @change="onChange"
    oninput="console.log('native oninput, DOM0 inline event style')"
>
    <span slot="input-before" class="input-group-addon">@</span>
</vc-easyclearinput>