Input

输入框使用演示

---

1. 简单input及事件监听

input组件可以监听输入框事件change、input、focus、blur，返回输入框内容改变后的值。

预览:

代码:

<template>
    <div>
        <g-input value="王五" 
                 @change="onChangeInput"
                 @input="onInput"
                 @focus="onFocusInput"
                 @blur="onBlurInput"></g-input>
    </div>
</template>
<script>
    export default {
        components: {'g-input': Input},
        methods: {
            onChangeInput(value) {
                console.log(value)
            },
            onInput(value) {},
            onFocusInput(value) {},
            onBlurInput(value) {},
        }
    }
</script>

2. disabled、readonly

预览:

代码:

<g-input value="disabled" disabled></g-input>
<g-input value="readonly" readonly></g-input>

3. 输入信息错误

预览:

代码:

<g-input value="12345" error="密码错误"></g-input>

4. 信息同步

输入框内容变化时，可改变相同内容，这里利用了vue的v-model功能。

预览:

代码:

<template>
    <div>
        <g-input v-model="message"></g-input>
        <span>{{message}}</span>
    </div>
</template>
<script>
    export default {
        components: {'g-input': Input},
        data() {
            return {
                message: '内容同步'
            }
        },
    }
</script>