Input输入框

Input输入框

通过鼠标和键盘输入字符。

Input为受控组件，它总会显示Vue绑定值。
通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
不支持v-model修饰符。

基础用法

效果图如下所示:

禁用状态

通过disabled属性指定是否禁用input组件

效果图如下图所示:

可清空

使用clearable属性即可得到一个可清空的输入框,输入框的右侧出现一个叉的标志，通过点击叉的标志实现清空输入框的功能。

效果图如下图所示:

密码框

使用show-password属性即可得到一个可切换显示隐藏的密码框。密码框的右侧出现一个眼睛的标识，点击这个标识会展示你输入的密码。

效果图如下所示:

没点击眼睛标识前的效果图：

点击眼睛标识后的效果图：

带有icon的输入框

可以通过 prefix-icon和 suffix-icon属性来在input组件头部和尾部来显示图标，也可以通过 slot来放置图标。

  属性方式：
  
  
  
  


  slot 方式：
  
    
  
  
    
  

效果图如下图所示：

文本域

用于输入多行文本信息，通过将type属性的值指定为textarea。文本域的高度可以通过rows属性来控制。

效果图如下图所示:

可适应文本高度的文本域

通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以指定为一个对象，指定最小行数和最大行数。

效果图如下图所示:

复合型输入框

可前置后或后置元素，一般为标签和按钮。可通过slot来指定在input中前置或者后置内容。

效果图如下图所示:

尺寸

可通过size属性指定输入框的尺寸，除了默认的大小外，还提供了large、small和mini三种尺寸。

div class="demo-input-size">
  
  
  
  
  
  
  
  

效果图如下图所示:

带输入建议

autocomplete是一个可带输入建议的输入框组件，fetch-suggestion是一个返回输入建议的方法属性，如 querySearch(queryString,cb),在该方法中你可以在你的输入建议数据准备好时通过cb(data)返回到autocomplete组件中。

  
    
激活即列出输入建议
    
  
  
    
输入后匹配输入建议
    
  

效果图如下图所示:

自定义模板

可自定义输入建议显示。使用scoped slot自定义输入建议的模板。该scope的参数为item，表示当前输入建议对象。

效果图如下图所示：

远程搜索

从服务器搜索数据

效果图如下图所示:

输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

效果图如下图所示:

input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea和其他原生input的type值	text
value/v-model	绑定值	string/number	——	——
maxlength	原生属性，最大输入长度	number	——	——
minlength	原生属性，最小输入长度	number	——	——
show-word-limit	是否显示输入字符统计，只在type=“text”或type="textarea"时有效	boolean	——	false
placeholder	输入框占位文本	string	——	——
clearable	是否清空	boolean	——	false
show-password	是否显示切换密码图标	boolean	——	false
disabled	禁用	boolean	——	false
size	输入框尺寸，只在type!="textarea"时有效	string	medium/small/mini	——
prefix-icon	输入框头部图标	string	——	——
suffix-icon	输入框尾部图标	string	——	——
rows	输入框行数，只有在type="textarea"时有效	number	——	2
autosize	自适应内容高度，只对type="textarea"有效，可传入对象，如，{minRows:2,maxRows:10}	boolean/object	——	false
autocomplete	原生属性，自动补全	string	on，off	off
auto-complete	下个版本弃用	string	on，off	off
name	原生属性	string	——	——
readonly	原生属性，是否只读	boolean	——	——
max	原生属性，设置最大值	——	——	——
min	原生属性，设置最小值	——	——	——
step	原生属性，设置输入字段的合法数字间距	——	——	——
resize	控制是否能被用户缩放	string	none，both，horizontal， vertical	——
autofocus	原生属性，自动获取焦点	boolean	true，false	false
form	原生属性	string	——	——
label	输入框关联的label文字	string	——	——
tabindex	输入框的tabindex	string	——	——
vaildate-event	输入时是否触发表单的校验	boolean	——	true

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Input Slots

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

 

 

 

 

 

 

Input Events

事件名称	说明	回调参数
blur	在input失去焦点时触发	（event:Event）
focus	在input获得焦点时触发	（event:Event）
change	仅在输入框失去焦点或用户按下回车键时触发	（value:string|number）
input	在Input值改变时触发	（value:string|number）
clear	再点击clearable属性生成的清空按钮时触发	——

 

 

 

 

 

 

 

 

Input Methods

方法名	说明	参数
focus	使input获取焦点	——
blur	使input失去焦点	——
select	选中input中的文字	——

 

 

 

 

 

Autocomplete Attributes

参数	说明	类型	可选值	默认值
placeholder	输入框占位文本	string	——	——
disabled	禁用	boolean	——	false
value-key	输入建议对象用于显示键名	string	——	value
value	必填值，输入绑定值	string	——	——
debounce	获取输入建议的去 抖延时	number	——	300
placement	菜单弹出位置	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom-start
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据resolve时，通过调用 callback（data:[]）来返回它	Function（ queryString，callback）	——	——
popper-class	Autocomplete下拉列表的类名	string	——	——
trigger-on-focus	是否在输入框focus时显示建议列表	boolean	——	true
name	原生属性	string	——	——
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发select事件	boolean	——	false
label	输入框关联的label文字	string	——	——
prefix-icon	输入框头部图标	string	——	——
suffix-icon	输入框尾部图标	string	——	——
hide-loading	是否隐藏远程加载时的加载图标	boolean	——	false
popper-append-to-body	是否将下拉列表插入至body元素。在下拉列表出现问题时，可将此属性设置为false	boolean	——	true
highlight-frist-item	是否默认突出显示远程搜索建议的第一项	boolean	——	false

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Autocomplete Slots

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

 

 

 

 

 

 

Autocomplete Scoped Slot

名称	说明
——	自定义输入建议，参数为{item}

 

 

 

Autocomplete Events

事件名称	说明	回调参数
select	点击选中建议项时触发	选中建议项
change	在input值改变时触发	（value:string|number）

 

 

 

 

Autocomplete Methods

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