自动完成输入框

简介

自动完成输入框是一个辅助输入的输入框组件,在需要输入建议/辅助提示时使用。

image

配置项

分类

配置

示例

说明

内容

数据源

image

image

可手动或者映射配置,其中手动配置可直接配置每个 item,映射配置需配置数据源(数组),每个 item 包含label、value 和 disabled 三个属性。

默认值

image

默认值

占位内容

image

占位内容

标签

imageimage

表单标签 ,详情参见表单通用属性

交互

隐藏

image

隐藏,详情参见通用属性

禁用

image

开启后,组件不可使用

校验

image

表单校验,详情参见表单通用属性

样式

外边距

image

外边距,详情参见通用属性

清除按钮

image

是否显示清除按钮

形态变体

image

各种形态变体,不同形态的可添加的 CSS 样式有所不同

CSS 样式

圆角

image

组件圆角

选项字体大小

image

组件下拉选项字体大小

选框背景色

image

组件选框背景颜色

选项悬浮时背景色

image

组件边框色

标签字体大小

image

组件标签字体大小

属性与方法

名称

类型

示例

说明

value

string

autoComplete.value

当前输入内容

labelText

string

autoComplete.labelText

标签文字

palceholder

string

autoComplete.palceholder

占位内容

disabled

boolean

autoComplete.disabled

组件是否禁用

options

array

autoComplete.options

组件数据源

hidden

boolean

autoComplete.hidden

组件是否隐藏

validationStatus

boolean

autoComplete.validationStatus

组件校验后的状态

validationMessage

string

autoComplete.validationMessage

组件校验后的信息

blur

func

autoComplete.blur()

组件失去焦点

focus

func

autoComplete.focus()

组件获得焦点

validate

func

autoComplete.validate()

组件校验

setValue

func

autoComplete.setValue('')

设置组件的内容

setDisabled

func

autoComplete.setDisabled(true)

设置组件是否禁用

setHidden

func

autoComplete.setHidden(true)

设置组件的隐藏状态

clearValue

func

autoComplete.clearValue()

清除组件的 value 值

clearHidden

func

autoComplete.clearHidden()

清除组件的 hidden 值

clearValidate

func

autoComplete.clearValidate()

清除组件的校验信息

事件回调

配置

说明

image

组件的值发生改变后触发的事件

image

组件获得焦点后触发的事件

image

组件失去焦点后触发的事件

image

输入文字后联想搜索时触发的事件

image

用户通过关键字搜索并选择后的触发的事件