禁用状态

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

可清空

clearable

密码框

使用show-password属性即可得到一个可切换显示隐藏的密码框

带图标的输入框

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

文本域

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

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

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

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

复合性输入框

可通过 slot 来指定在 input 中前置或者后置内容。

<el-input>
       <el-select v-model="select" slot="prepend" placeholder="请选择">
             <el-option label="餐厅名" value="1"></el-option>
             <el-option label="订单号" value="2"></el-option>
             <el-option label="用户电话" value="3"></el-option>
           </el-select>

       <el-button slot="append" icon="el-icon-search"></el-button>
     </el-input>

尺寸大小

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

长度限制

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

<div>
       <el-input  v-model="inputvalue" size="large"  maxlength="10" show-word-limit></el-input>
       <el-input size="small"></el-input>
       <el-input size="mini"></el-input>
     </div>

<template>
  <div>
     <el-input v-model="inputvalue"  placeholder="请输入你的内容" clearable  show-password></el-input>
     <p> {{ inputvalue }}</p>




     <div class="demo-input-suffix">
       属性方式:
       <el-input placeholder="请选择日期!" suffix-icon="el-icon-date"></el-input>
       <el-input placeholder="请输入内容!" prefix-icon="el-icon-search"></el-input>
     </div>



     <el-input type="textarea" :rows="10"  :autosize="{ minRows: 2, maxRows: 4}"></el-input>


     <el-input >
       <template slot="prepend">HTTP://</template>

     </el-input>

     <el-input>
       <template slot="append">.com</template>
     </el-input>


     <el-input>
       <el-select v-model="select" slot="prepend" placeholder="请选择">
             <el-option label="餐厅名" value="1"></el-option>
             <el-option label="订单号" value="2"></el-option>
             <el-option label="用户电话" value="3"></el-option>
           </el-select>

       <el-button slot="append" icon="el-icon-search"></el-button>
     </el-input>


     <div>
       <el-input  v-model="inputvalue" size="large"  maxlength="10" show-word-limit></el-input>
       <el-input size="small"></el-input>
       <el-input size="mini"></el-input>
     </div>

  </div>



</template>

<script>
  export default {
    data () {
      return {
        inputvalue: "1"
      };
    }
  }
</script>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>