本文来源于Element官方文档：http://element-cn.eleme.io/#/zh-CN/component/inputhttp://element-cn.eleme.io/#/zh-CN/component/input基础用法带图标的输入框（属性方式）


placeholder="请选择日期"

suffix-icon="el-icon-date"

v-model="input2">


placeholder="请输入内容"

prefix-icon="el-icon-search"

v-model="input21">



placeholder="请选择日期"

suffix-icon="el-icon-date"

v-model="input2">


placeholder="请输入内容"

prefix-icon="el-icon-search"

v-model="input21">

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



placeholder="请选择日期"

v-model="input22">




placeholder="请输入内容"

v-model="input23">






placeholder="请选择日期"

v-model="input22">




placeholder="请输入内容"

v-model="input23">



复合输入框
























































带提示的输入框


class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

>

popper-class="my-autocomplete"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">

class="el-icon-edit el-input__icon"

slot="suffix"

@click="handleIconClick">




class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入内容"

@select="handleSelect"

>

popper-class="my-autocomplete"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">

class="el-icon-edit el-input__icon"

slot="suffix"

@click="handleIconClick">


input 属性：input 属性：






参数

类型

说明

可选值

默认值









type

类型

string

text / textarea

text





value

绑定值

string / number

—

—





maxlength

最大输入长度

number

—

—





minlength

最小输入长度

number

—

—





placeholder

输入框占位文本

string

—

—





clearable

是否可清空

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: 6 }

boolean / object

—

false





auto-complete

原生属性，自动补全

string

on, off

off





name

原生属性

string

—

—





readonly

原生属性，是否只读

boolean

—

false





max

原生属性，设置最大值

—

—

—





min

原生属性，设置最小值

—

—

—





step

原生属性，设置输入字段的合法数字间隔

—

—

—





resize

控制是否能被用户缩放

string

none, both, horizontal, vertical

—





autofocus

原生属性，自动获取焦点

boolean

true, false

false





form

原生属性

string

—

—





label

输入框关联的label文字

string

—

—





tabindex

输入框的tabindex

string

-

-








参数

类型

说明

可选值

默认值





参数

类型

说明

可选值

默认值

参数类型说明可选值默认值



type

类型

string

text / textarea

text





value

绑定值

string / number

—

—





maxlength

最大输入长度

number

—

—





minlength

最小输入长度

number

—

—





placeholder

输入框占位文本

string

—

—





clearable

是否可清空

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: 6 }

boolean / object

—

false





auto-complete

原生属性，自动补全

string

on, off

off





name

原生属性

string

—

—





readonly

原生属性，是否只读

boolean

—

false





max

原生属性，设置最大值

—

—

—





min

原生属性，设置最小值

—

—

—





step

原生属性，设置输入字段的合法数字间隔

—

—

—





resize

控制是否能被用户缩放

string

none, both, horizontal, vertical

—





autofocus

原生属性，自动获取焦点

boolean

true, false

false





form

原生属性

string

—

—





label

输入框关联的label文字

string

—

—





tabindex

输入框的tabindex

string

-

-





type

类型

string

text / textarea

text

type类型stringtext / textareatext

value

绑定值

string / number

—

—

value绑定值string / number——

maxlength

最大输入长度

number

—

—

maxlength最大输入长度number——

minlength

最小输入长度

number

—

—

minlength最小输入长度number——

placeholder

输入框占位文本

string

—

—

placeholder输入框占位文本string——

clearable

是否可清空

boolean

—

false

clearable是否可清空boolean—false

disabled

禁用

boolean

—

false

disabled禁用boolean—false

size

输入框尺寸，只在 type!=”textarea” 时有效

string

medium / small / mini

—

size输入框尺寸，只在 type!=”textarea” 时有效stringmedium / small / mini—

prefix-icon

输入框头部图标

string

—

—

prefix-icon输入框头部图标string——

suffix-icon

输入框尾部图标

string

—

—

suffix-icon输入框尾部图标string——

rows

输入框行数，只对 type=”textarea” 有效

number

—

2

rows输入框行数，只对 type=”textarea” 有效number—2

autosize

自适应内容高度，只对 type=”textarea” 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }

boolean / object

—

false

autosize自适应内容高度，只对 type=”textarea” 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }boolean / object—false

auto-complete

原生属性，自动补全

string

on, off

off

auto-complete原生属性，自动补全stringon, offoff

name

原生属性

string

—

—

name原生属性string——

readonly

原生属性，是否只读

boolean

—

false

readonly原生属性，是否只读boolean—false

max

原生属性，设置最大值

—

—

—

max原生属性，设置最大值———

min

原生属性，设置最小值

—

—

—

min原生属性，设置最小值———

step

原生属性，设置输入字段的合法数字间隔

—

—

—

step原生属性，设置输入字段的合法数字间隔———

resize

控制是否能被用户缩放

string

none, both, horizontal, vertical

—

resize控制是否能被用户缩放stringnone, both, horizontal, vertical—

autofocus

原生属性，自动获取焦点

boolean

true, false

false

autofocus原生属性，自动获取焦点booleantrue, falsefalse

form

原生属性

string

—

—

form原生属性string——

label

输入框关联的label文字

string

—

—

label输入框关联的label文字string——

tabindex

输入框的tabindex

string

-

-

tabindex输入框的tabindexstring--input slot：input slot：






name

说明









prefix

输入框头部内容，只对 type=”text” 有效





suffix

输入框尾部内容，只对 type=”text” 有效





prepend

输入框前置内容，只对 type=”text” 有效





append

输入框后置内容，只对 type=”text” 有效








name

说明





name

说明

name说明



prefix

输入框头部内容，只对 type=”text” 有效





suffix

输入框尾部内容，只对 type=”text” 有效





prepend

输入框前置内容，只对 type=”text” 有效





append

输入框后置内容，只对 type=”text” 有效





prefix

输入框头部内容，只对 type=”text” 有效

prefix输入框头部内容，只对 type=”text” 有效

suffix

输入框尾部内容，只对 type=”text” 有效

suffix输入框尾部内容，只对 type=”text” 有效

prepend

输入框前置内容，只对 type=”text” 有效

prepend输入框前置内容，只对 type=”text” 有效

append

输入框后置内容，只对 type=”text” 有效

append输入框后置内容，只对 type=”text” 有效input 事件：input 事件：






事件名称

说明

回调参数









blur

在 Input 失去焦点时触发

(event: Event)





focus

在 Input 获得焦点时触发

(event: Event)





change

在 Input 值改变时触发

(value: string 或 number)








事件名称

说明

回调参数





事件名称

说明

回调参数

事件名称说明回调参数



blur

在 Input 失去焦点时触发

(event: Event)





focus

在 Input 获得焦点时触发

(event: Event)





change

在 Input 值改变时触发

(value: string 或 number)





blur

在 Input 失去焦点时触发

(event: Event)

blur在 Input 失去焦点时触发(event: Event)

focus

在 Input 获得焦点时触发

(event: Event)

focus在 Input 获得焦点时触发(event: Event)

change

在 Input 值改变时触发

(value: string 或 number)

change在 Input 值改变时触发(value: string 或 number)input 方法：input 方法：






方法名

说明

参数









focus

使 input 获取焦点

-








方法名

说明

参数





方法名

说明

参数

方法名说明参数



focus

使 input 获取焦点

-





focus

使 input 获取焦点

-

focus使 input 获取焦点-Autocomplete 属性：Autocomplete 属性：






参数

类型

说明

可选值

默认值









placeholder

输入框占位文本

string

—

—





disabled

禁用

boolean

—

false





value-key

输入建议对象中用于显示的键名

string

—

value





value

必填值，输入绑定值

string

—

—





debounce

获取输入建议的去抖延时

number

—

300





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

—

—








参数

类型

说明

可选值

默认值





参数

类型

说明

可选值

默认值

参数类型说明可选值默认值



placeholder

输入框占位文本

string

—

—





disabled

禁用

boolean

—

false





value-key

输入建议对象中用于显示的键名

string

—

value





value

必填值，输入绑定值

string

—

—





debounce

获取输入建议的去抖延时

number

—

300





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

—

—





placeholder

输入框占位文本

string

—

—

placeholder输入框占位文本string——

disabled

禁用

boolean

—

false

disabled禁用boolean—false

value-key

输入建议对象中用于显示的键名

string

—

value

value-key输入建议对象中用于显示的键名string—value

value

必填值，输入绑定值

string

—

—

value必填值，输入绑定值string——

debounce

获取输入建议的去抖延时

number

—

300

debounce获取输入建议的去抖延时number—300

fetch-suggestions

返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它

Function(queryString, callback)

—

—

fetch-suggestions返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它Function(queryString, callback)——

popper-class

Autocomplete 下拉列表的类名

string

—

—

popper-classAutocomplete 下拉列表的类名string——

trigger-on-focus

是否在输入框 focus 时显示建议列表

boolean

—

true

trigger-on-focus是否在输入框 focus 时显示建议列表boolean—true

name

原生属性

string

—

—

name原生属性string——

select-when-unmatched

在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件

boolean

—

false

select-when-unmatched在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件boolean—false

label

输入框关联的label文字

string

—

—

label输入框关联的label文字string——

prefix-icon

输入框头部图标

string

—

—

prefix-icon输入框头部图标string——

suffix-icon

输入框尾部图标

string

—

—

suffix-icon输入框尾部图标string——Autocomplete slots：Autocomplete slots：






name

说明









prefix

输入框头部内容





suffix

输入框尾部内容





prepend

输入框前置内容





append

输入框后置内容








name

说明





name

说明

name说明



prefix

输入框头部内容





suffix

输入框尾部内容





prepend

输入框前置内容





append

输入框后置内容





prefix

输入框头部内容

prefix输入框头部内容

suffix

输入框尾部内容

suffix输入框尾部内容

prepend

输入框前置内容

prepend输入框前置内容

append

输入框后置内容

append输入框后置内容Autocomplete 事件：Autocomplete 事件：






事件名称

说明

回调参数









select

点击选中建议项时触发

选中建议项








事件名称

说明

回调参数





事件名称

说明

回调参数

事件名称说明回调参数



select

点击选中建议项时触发

选中建议项





select

点击选中建议项时触发

选中建议项

select点击选中建议项时触发选中建议项