Input 输入框

通过鼠标或键盘输入字符

基础用法

<!--当设置 value 初始值属性后，会覆盖 placeholder-->
<!--你可以通过 [(model)] 进行双向绑定-->
<el-input [model]="input" placeholder="请输入内容"></el-input>

禁用状态

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

<el-input placeholder="请输入内容"
  [model]="input1"
  [elDisabled]="true">
</el-input>

带 icon 的输入框

带有图标标记输入类型

通过 icon 属性在 input 组件尾部增加显示图标

<!--你可以使用 (icon-click)=Function 来得到图标点击的事件-->
<el-input placeholder="请选择日期"
  icon="search"
  [model]="input2">
</el-input>

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

文本域高度可通过 rows 属性控制

<el-input type="textarea"
  [rows]="2"
  placeholder="请输入内容"
  [model]="textarea">
</el-input>

可自适应文本高度的文本域

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

<el-input type="textarea"
  autosize
  placeholder="固定高度文本域"
  [model]="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input type="textarea"
  [autosize]="{ minRows: 2, maxRows: 4}"
  placeholder="自动调整高度 { minRows: 2, maxRows: 4 }"
  [model]="textarea3">
</el-input>

复合型输入框

可前置或后置元素，一般为标签或按钮

<div>
  <el-input placeholder="请输入内容" [model]="input3">
    <ng-template #prepend>
      <span>Http://</span>
    </ng-template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" [model]="input4">
    <ng-template #append>
      <span>.com</span>
    </ng-template>
  </el-input>
</div>

尺寸

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

<div class="demo-input-size">
  <el-input size="large" placeholder="请输入内容" [model]="input6">
  </el-input>
  
  <el-input placeholder="请输入内容" [model]="input7">
  </el-input>
  
  <el-input size="small" placeholder="请输入内容" [model]="input8">
  </el-input>
  
  <el-input size="mini" placeholder="请输入内容" [model]="input9">
  </el-input>
  
</div>

Input Attributes