# Input 输入框

当光标位于输入框时，允许用户输入或编辑文本内容的基本表单组件，可与输入框，搜索框，下拉框，日期选择器等灵活组合使用。

# 代码演示

# API

# Input Attributes

参数	说明	类型	可选值	默认值	Version
autofocus	原生属性，自动获取焦点	Boolean	true, false	false
autocomplete	是否使用浏览器的记忆功能自动填充文本	String	—	on / off
clearable	是否可以被清空	Boolean	—	false
disabled	禁用输入框	Boolean	—	false
is-center	文字是否居中对齐(默认为左对齐)	Boolean	—	false
label	输入框关联的 label 文字	String	—	—	v2.0.0
maxlength	最大输入长度	Number	—	—
minlength	最小输入长度	Number	—	—
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
name	原生属性	String	—	—
placeholder	输入框的占位文本	String	—	—
pre-append	复合输入框中头部前缀类型	String	text	—	v2.0.0
prefix-icon	输入框首部图标, 值为通用字体图标的 className	String	—	—
readonly	原生属性，是否只读	Boolean	—	—
rows	行数(type 为textarea时有效)	Number	—	—
resize	是否允许文本域拖动操作(仅当 type 为 textarea 时生效)	String	'none' | 'both' | 'horizontal' | 'vertical'	—
suf-append	复合输入框中尾部后缀类型	String	'text' | 'button'	—	v2.0.0
size	输入框尺寸	String	'large' | 'medium' | 'small' | 'mini'	'medium'
show-counter	是否显示计数(当且仅当 showCounter 为 true, 同时设置了 maxlength 时有效)	Boolean	—	false
show-word-limit	* 同 show-counter	Boolean	—	false	v2.0.0
show-password	是否显示切换密码模式图标	Boolean	—	false	v2.0.0
suffix-icon	输入框尾部图标, 值为通用字体图标的 className	String	—	—
type	类型	String	'text' | 'textarea' | 'password' 等其他原生 type 可选值	'text'
tabindex	输入框的 tabindex	String	—	—	v2.0.0
value / v-model	绑定值	String / Number	—	—
validate-event	输入时是否触发表单的校验	Boolean	—	—
autosize	自适应高度的文本域(textarea), 可以传入 boolean 也可以传入对象，如：{minRows: 2, maxRows: 4}	Boolean | Object	—	false	v2.0.0
status	输入框状态	String	'success' | 'warning' | 'error'		v2.1.0
tips	输入框下方提示文本，会根据不同的 status 呈现不同的样式	String			v2.1.0
plain	是否是简洁模式的输入框	Boolean	true, false	false	V2.4.0
keywords	设置敏感词	Array		-	V2.4.6
force-number	是否会把空数据转化成 0	Boolean		true	V2.4.20
correct-clear	是否纠正 clear 会触发 blur	Boolean		false	V2.4.23
stop-suf-append	是否阻止事件的默认行为和冒泡	Boolean	—	false	v2.4.36
stop-pre-append	是否阻止事件的默认行为和冒泡	Boolean	—	false	v2.4.36
default-select	是否在 focus 时默认选中内容	Boolean	—	false	v2.4.42

# Input-Search Attributes

参数	说明	类型	可选值	默认值	Version
clearable	是否可以被清空	Boolean	—	true
disabled	禁用输入框	Boolean	—	false
is-center	文字是否居中对齐(默认为左对齐)	Boolean	—	false
label	输入框关联的 label 文字	String	—	—
maxlength	最大输入长度	Number	—	—
minlength	最小输入长度	Number	—	—
name	原生属性	String	—	—
placeholder	输入框的占位文本	String	—	—
readonly	原生属性，是否只读	Boolean	—	—
size	输入框尺寸	String	'large' | 'medium' | 'small' | 'mini'	'medium'
tabindex	输入框的 tabindex	String	—	—
value / v-model	绑定值	String / Number	—	—
validate-event	输入时是否触发表单的校验	Boolean	—	—
status	输入框状态	String	'success' | 'warning' | 'error'
tips	输入框下方提示文本，会根据不同的 status 呈现不同的样式	String
loading	是否加载中状态	Boolean	—	false
enterButton	是否显示右侧按钮	Boolean	—	true
theme	右侧按钮主题	String	light/dark	light
press-enter	是否开启按下回车按钮触发	Boolean	—	true	V2.4.28
suffix-icon	输入框尾部图标, 值为通用字体图标的 className	String	—	—	V2.4.31
prefix-icon	输入框首部图标, 值为通用字体图标的 className	String	—	—	V2.4.31

# Input-Temp Attributes

参数	说明	类型	可选值	默认值	Version
clearable	是否可以被清空	Boolean	—	true
disabled	禁用输入框	Boolean	—	false
is-center	文字是否居中对齐(默认为左对齐)	Boolean	—	false
label	输入框关联的 label 文字	String	—	—
name	原生属性	String	—	—
placeholder	输入框的占位文本	String	—	—
readonly	原生属性，是否只读	Boolean	—	—
size	输入框尺寸	String	'large' | 'medium' | 'small' | 'mini'	'medium'
tabindex	输入框的 tabindex	String	—	—
value / v-model	绑定值	String / Number	—	—
validate-event	输入时是否触发表单的校验	Boolean	—	—
tips	输入框下方提示文本，会根据不同的 status 呈现不同的样式	String
pre-append	复合输入框中头部前缀类型	String	text	—
prefix-icon	输入框首部图标, 值为通用字体图标的 className	String	—	—
suffix-icon	输入框尾部图标, 值为通用字体图标的 className	String	—	—

# Input-Suggestion Attributes

参数	说明	类型	可选值	默认值	Version
hover-title	是否显示文字	Boolean	—	false	V2.2.21
autocompelete	是否使用浏览器的记忆功能自动填充文本	String	—	on / off
clearable	是否可以被清空	Boolean	—	false
disabled	禁用输入框	Boolean	—	false
empty-placeholder	下拉无数据占位文本	String	—	—
fetch-suggestion-list	返回推荐列表的方法, 使用 cb([])来返回	Function	—	(query, cb)
fetch-suggestions	* 同 fetch-suggestion-list	Function	—	(query, cb)	v2.0.0
hide-loading	是否隐藏远程加载时的加载图标	Boolean	—	false	v2.0.0
is-center	文字是否居中对齐(默认为左对齐)	Boolean	—	false
is-focus-trigger	是否为聚焦展开下拉(已在 v2.0.0 被废弃, 被trigger-on-focus代替)	Boolean	—	true
label	输入框关联的 label 文字	String	—	—	v2.0.0
maxlength	最大输入长度	Number	—	—
minlength	最小输入长度	Number	—	—
min-popper-height	最小下拉面板高度	String	'75px'	—	v1.7.16
name	原生属性	String	—	—
placeholder	输入框占位文本	String	—	—
placement	下拉框气泡出现的位置(同 popover 参数)	String	—	—
prefix-icon	输入框首部图标, 值为通用字体图标的 className	String	—	—
popper-class	为下拉列表添加 class	String	—	—
popper-append-to-body	下拉框气泡是否插入至 body	Boolean	true	-	v2.0.0
readonly	是否只读	Boolean	—	—
size	输入框尺寸	String	'large' | 'medium' | 'small' | 'mini'	'medium'
suffix-icon	输入框尾部图标, 值为通用字体图标的 className	String	—	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	Boolean	—	false	v2.0.0
trigger-on-focus	是否为聚焦展开下拉	Boolean	—	true	v2.0.0
value / v-model	绑定值	String	—	—
value-key	被选中项的属性名, 用于填充 input	String	—	value
popper-width	下拉框的宽度，支持 auto 属性，popper 自由展开	String	—	—	v2.0.6
status	输入框状态	String	'success' | 'warning' | 'error'		v2.0.12
tips	输入框下方提示文本，会根据不同的 status 呈现不同的样式	String			v2.0.12

# Input Methods

参数	说明	回调参数	Version
focus	使 input 获取焦点	—
blur	使 input 失去焦点	—
select	选中 input 中的文字	—	v2.0.0

# Input Events

参数	说明	回调参数	Version
blur	input 失去焦点时触发	—
change	input 失去焦点或在 focus 状态按下回车键时触发	—
clear	点击清除按钮清空 input 值时触发	—
focus	input 取得焦点时触发	—
input	输入发生变化时即刻触发	—
sufAppendClick	尾部按钮被点击时触发(仅在复合输入框, 且 sufAppendIsButton = true 时生效)	—

# Input-search Events

参数	说明	回调参数	Version
search	点击回车或者按钮
blur	input 失去焦点时触发	—
change	input 失去焦点或在 focus 状态按下回车键时触发	—
clear	点击清除按钮清空 input 值时触发	—
focus	input 取得焦点时触发	—
input	输入发生变化时即刻触发	—

# Input-temp Events

事件名称	说明	回调参数	Version
blur	失去焦点时触发	(event: Event)
change	绑定值被改变时触发	当前的值
focus	获得焦点时触发	(event: Event)

# Input-suggestion Events

参数	说明	回调参数	Version
clear	点击清除按钮清空 input 值时触发	—
select	点选下拉某一项时触发	当前选中的项
focus	input 取得焦点时触发	—
blur	input 失去焦点时触发	—

# Input-suggestion Slots

参数	说明	Version
popper-header	下拉框头部插槽	v2.0.0
popper-footer	下拉框底部插槽	v2.0.0

# 常见问题

• 1、在使用 w-input-suggestion 组件时，需要自定义 popper 的宽度或者根据内容自动展开，应该怎么配置？

在 v2.0.6 的版本，新增了 API popper-width 属性，此属性支持 auto 或者 100px 配置；需要注意的是 auto 时，默认最小宽度为输入框的宽度。