Input 基础组件

图标

密码

验证码

前缀 + 下拉菜单

报错提示文案

自定义宽度

自定义高度

多行输入框

字数统计

API

Attributes

名称类型可选值默认值说明
model-value / v-modelnumber / undefined选中项绑定值
typestringtext/password/textarea/vericodetext输入框的类型 vericode 为密码输入框类型
placeholderstring请输入输入框提示文字
errorTextstringnull错误信息提示
prefixIconstring前图标
suffixIconstring后图标
clearablebooleantrue/false清空 输入框
rowsnumber4输入框行数,仅 type 为 'textarea' 时有效
heightnumber /string32输入框高度,当 type 为 'textarea' 时有效,优先级高于 rows 且为最小高度
widthnumber /string200输入框宽度 当 type 为 'textarea' 时为最小宽度,
show-word-limitBoolean是否显示字数
maxlengthnumber/object最大字数:类型为 number 超出后不能再输入;为 object 可以继续输入也可设置错误文案 例 maxlength="{length:10,errorText:'文字超出了'}"
支持所有原生的 Input 属性-原生的 Input 属性例如 readonly
autofocusbooleanfalse是否自动获取焦点
disabledbooleanfalse是否禁用输入框
prependSuffixWidthnumber0设置前缀的宽度,为 0 是设置 minWidth:48,默认为 0
appendSuffixHeightnumber0设置后缀的宽度,为 0 是设置 minWidth:48,默认为 0

Slot

名称说明
prefix输入框头部内容,只对 type="text" 有效
suffix输入框尾部内容,只对 type="text" 有效
prepend输入框前置内容,只对 type="text" 有效
append输入框后置内容,只对 type="text" 有效

Events

名称参数说明
input(currentValue)绑定值被改变时触发
change(currentValue)仅在输入框失去焦点或用户按下回车时触发
blur(event: Event)在组件 Input 失去焦点时触发
focus(event: Event)在组件 Input 获得焦点时触发
clear(event: Event)在组件 Input 点击清空触发
keyup(event: Event)输入框 keyup 事件
pressEnter(event: Event)输入框回车事件

最近更新于: