ElementUI学习 input输入

今天开始不摸了。

Input 为受控组件，它总会显示 Vue 绑定值。
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
基本例子:

<el-col :span="6">
        <div>
          <el-input v-model="input1" placeholder="请输入" clearable ></el-input>
        </div>
</el-col>

使用clearable属性即可得到一个可清空的输入框

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

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

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

输入长度限制

例子:

 <div>
          <el-input v-model="input2" maxlength="10" show-word-limit ></el-input>
 </div>

内置图标

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

<el-col :span="6">
        <div>
          <el-input v-model="input3" placeholder="前置图标" prefix-icon="el-icon-search"></el-input>
        </div>
</el-col>

<el-col :span="6">
        <div>
          <el-input v-model="input4" placeholder="后置图标" suffix-icon="el-icon-date" ></el-input>
        </div>
</el-col>

复合型输入框

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

<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>

后置

<el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>

复合:

<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <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>

带输入建议

关于复杂 后续学习