# Input输入框

# ✨简单用法

<wb-input value="正常输入"></wb-input>
显示代码 复制代码

# ✨禁用状态

通过 disabled 属性指定是否禁用 input 组件

<wb-input value="禁止输入" disabled></wb-input>
显示代码 复制代码

# ✨只读状态

通过 readonly 属性指定是否只读 input 组件

<wb-input value="只读" readonly></wb-input>
显示代码 复制代码

# ✨错误状态

通过 error 属性指定input 组件输入错误信息提示

<wb-input value="输入错误" error="信息输入错误,请检查"></wb-input>
显示代码 复制代码

# ✨双向绑定

message:双向绑定

通过v-model属性实现双向绑定

<template>
    <div>
        <wb-input v-model="message"></wb-input>
        <div style="margin-top: 20px">message:{{message}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message: '双向绑定',
            }
        }
    }
</script>
显示代码 复制代码

# ✨事件绑定

<template>
    <div>
        <wb-input value="事件绑定" @change="callback"></wb-input>
        <wb-input value="事件绑定" @input="callback2"></wb-input>
    </div>
</template>
<script>
    export default {
        methods:{
            callback(value){
                console.log(value);
            },
            callback2(value){
                console.log(value);
            }
        }
    }
</script>
显示代码 复制代码

# 📌 Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string
disabled 是否禁用 boolean false
readonly 是否只读 boolean false
error 错误信息 String

# 📌 Input Events

方法名
说明
参数
change 仅在输入框失去焦点或用户按下回车时触发 (value: string
input 在 Input 值改变时触发 (value: string
focus 在 Input 获得焦点时触发 (event: Event)
blur 在 Input 失去焦点时触发 (event: Event)