<!--基本-->
<el-input
v-model="input"
placeholder="请输入内容">
</el-input>
new Vue({
el: '#app',
data() {
return {
input: ''
}
}
})
<!--通过 disabled 属性指定是否禁用 input 组件-->
<el-input
v-model="input"
placeholder="禁用状态"
:disabled="true">
</el-input>
<!--使用clearable属性即可得到一个可清空的输入框(点击后面的x)-->
<el-input
v-model="input"
placeholder="可清空的输入框"
clearable>
</el-input>
<!--用于输入多行文本信息,通过将 type 属性的值指定为 textarea。
文本域高度可通过 rows 属性控制;
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。-->
<el-input
type="textarea"
:rows="2"
v-model="textarea"
placeholder="多行文本域">
</el-input>
<!--可通过 size 属性指定输入框的尺寸(改变的只是高度,宽度不变),除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标-->
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input6">
</el-input>
<el-input
size="medium"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input7">
</el-input>
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
类型 |
string |
text,textarea 和其他 原生 input 的 type 值 |
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 |
name |
原生属性 |
string |
— |
— |
readonly |
原生属性,是否只读 |
boolean |
— |
false |
max |
原生属性,设置最大值 |
— |
— |
— |
min |
原生属性,设置最小值 |
— |
— |
— |
label |
输入框关联的label文字 |
string |
— |
— |
事件名称 |
说明 |
回调参数 |
blur |
在 Input 失去焦点时触发 |
(event: Event) |
focus |
在 Input 获得焦点时触发 |
(event: Event) |
change |
在 Input 值改变时触发 |
(value: string | number) |
clear |
在点击由 clearable 属性生成的清空按钮时触发 |
方法名 |
说明 |
参数 |
focus |
使 input 获取焦点 |
— |
blur |
使 input 失去焦点 |
— |
select |
选中 input 中的文字 |