Element Input输入框的使用方法

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/input

基础用法

带图标的输入框（属性方式）

<el-input
  placeholder="请选择日期"
  suffix-icon="el-icon-date"
  v-model="input2">
 </el-input>
 <el-input
  placeholder="请输入内容"
  prefix-icon="el-icon-search"
  v-model="input21">
 </el-input> 

带图标的输入框（slot方式）

  <el-input
  placeholder="请选择日期"
  v-model="input22">
  <i slot="suffix" class="el-input__icon el-icon-date"></i>
 </el-input>
 <el-input
  placeholder="请输入内容"
  v-model="input23">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
 </el-input> 

复合输入框

<div>
 <el-input placeholder="请输入内容" v-model="input3">
  <template slot="prepend">Http://</template>
 </el-input>
</div>
<div>
 <el-input placeholder="请输入内容" v-model="input4">
  <template slot="append">.com</template>
 </el-input>
</div>
<div>
 <el-input placeholder="请输入内容" v-model="input5" 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>
</div> 

带提示的输入框

<el-autocomplete
   class="inline-input"
   v-model="state1"
   :fetch-suggestions="querySearch"
   placeholder="请输入内容"
   @select="handleSelect"
  ></el-autocomplete>

<el-autocomplete
 popper-class="my-autocomplete"
 v-model="state2"
 :fetch-suggestions="querySearch"
 placeholder="请输入内容"
 @select="handleSelect">
 <i
  class="el-icon-edit el-input__icon"
  slot="suffix"
  @click="handleIconClick">
 </i>
 <template slot-scope="props">
  <div class="name">{{ props.item.value }}</div>
  <span class="addr">{{ props.item.address }}</span>
 </template>
</el-autocomplete>

input 属性：

参数 类型 说明 可选值 默认值 type 类型 string text / textarea 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 auto-complete 原生属性，自动补全 string on, off off name 原生属性 string — — readonly 原生属性，是否只读 boolean — false max 原生属性，设置最大值 — — — min 原生属性，设置最小值 — — — step 原生属性，设置输入字段的合法数字间隔 — — — resize 控制是否能被用户缩放 string none, both, horizontal, vertical — autofocus 原生属性，自动获取焦点 boolean true, false false form 原生属性 string — — label 输入框关联的label文字 string — — tabindex 输入框的tabindex string - -

input slot：

name 说明 prefix 输入框头部内容，只对 type=”text” 有效 suffix 输入框尾部内容，只对 type=”text” 有效 prepend 输入框前置内容，只对 type=”text” 有效 append 输入框后置内容，只对 type=”text” 有效

input 事件：

事件名称 说明 回调参数 blur 在 Input 失去焦点时触发 (event: Event) focus 在 Input 获得焦点时触发 (event: Event) change 在 Input 值改变时触发 (value: string 或 number)

input 方法：

方法名 说明 参数 focus 使 input 获取焦点 -

Autocomplete 属性：

参数 类型 说明 可选值 默认值 placeholder 输入框占位文本 string — — disabled 禁用 boolean — false value-key 输入建议对象中用于显示的键名 string — value value 必填值，输入绑定值 string — — debounce 获取输入建议的去抖延时 number — 300 fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 Function(queryString, callback) — — popper-class Autocomplete 下拉列表的类名 string — — trigger-on-focus 是否在输入框 focus 时显示建议列表 boolean — true name 原生属性 string — — select-when-unmatched 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件 boolean — false label 输入框关联的label文字 string — — prefix-icon 输入框头部图标 string — — suffix-icon 输入框尾部图标 string — —

Autocomplete slots：

name 说明 prefix 输入框头部内容 suffix 输入框尾部内容 prepend 输入框前置内容 append 输入框后置内容

Autocomplete 事件：

事件名称 说明 回调参数 select 点击选中建议项时触发 选中建议项