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)