Element Input输入框的使用方法

2023-07-19 21:08:04 179

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/input

基础用法

带图标的输入框（属性方式）

带图标的输入框（slot方式）

复合输入框



Http://




.com

带提示的输入框







{{props.item.value}}

input属性：

说明 string string/number number number string boolean boolean string string string number boolean/object string string boolean — — — string boolean string string string

参数	类型	可选值	默认值
type	类型	text/textarea	text
value	绑定值	—	—
maxlength	最大输入长度	—	—
minlength	最小输入长度	—	—
placeholder	输入框占位文本	—	—
clearable	是否可清空	—	false
disabled	禁用	—	false
size	输入框尺寸，只在type!=”textarea”时有效	medium/small/mini	—
prefix-icon	输入框头部图标	—	—
suffix-icon	输入框尾部图标	—	—
rows	输入框行数，只对type=”textarea”有效	—	2
autosize	自适应内容高度，只对type=”textarea”有效，可传入对象，如，{minRows:2,maxRows:6}	—	false
auto-complete	原生属性，自动补全	on,off	off
name	原生属性	—	—
readonly	原生属性，是否只读	—	false
max	原生属性，设置最大值	—	—
min	原生属性，设置最小值	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—
resize	控制是否能被用户缩放	none,both,horizontal,vertical	—
autofocus	原生属性，自动获取焦点	true,false	false
form	原生属性	—	—
label	输入框关联的label文字	—	—
tabindex	输入框的tabindex	-	-

inputslot：

name	说明
prefix	输入框头部内容，只对type=”text”有效
suffix	输入框尾部内容，只对type=”text”有效
prepend	输入框前置内容，只对type=”text”有效
append	输入框后置内容，只对type=”text”有效

input事件：

回调参数 (event:Event) (event:Event) (value:string或number)

事件名称	说明
blur	在Input失去焦点时触发
focus	在Input获得焦点时触发
change	在Input值改变时触发

input方法：

参数 -

方法名	说明
focus	使input获取焦点

Autocomplete属性：

说明 string boolean string string number Function(queryString,callback) string boolean string boolean string string string

参数	类型	可选值	默认值
placeholder	输入框占位文本	—	—
disabled	禁用	—	false
value-key	输入建议对象中用于显示的键名	—	value
value	必填值，输入绑定值	—	—
debounce	获取输入建议的去抖延时	—	300
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据resolve时，通过调用callback(data:[])来返回它	—	—
popper-class	Autocomplete下拉列表的类名	—	—
trigger-on-focus	是否在输入框focus时显示建议列表	—	true
name	原生属性	—	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发select事件	—	false
label	输入框关联的label文字	—	—
prefix-icon	输入框头部图标	—	—
suffix-icon	输入框尾部图标	—	—

Autocompleteslots：

name	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

Autocomplete事件：

回调参数选中建议项

事件名称	说明
select	点击选中建议项时触发

到此这篇关于ElementInput输入框的使用方法的文章就介绍到这了,更多相关ElementInput输入框内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

Element Input输入框的使用方法

热门推荐

随机推荐