Form-input输入框

<!--基本-->

<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>

Input Attributes

参数	说明	类型	可选值	默认值
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	—	—

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	在 Input 值改变时触发	(value: string | number)
clear	在点击由 clearable 属性生成的清空按钮时触发

Input Methods

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