element/examples/docs/input.md

基本用法

<el-input
  placeholder="请输入内容"
  :value.sync="input"
  name="user">
</el-input>
<el-input
  placeholder="请输入内容"
  :value.sync="textarea"
  name="desc"
  type="textarea">
</el-input>

禁用状态

<el-input
  :disabled="true"
  placeholder="请输入内容"
  :value.sync="input1">
</el-input>

Input 图标

<el-input
  placeholder="请选择日期"
  icon="time"
  :value.sync="input1">
</el-input>

Input Group

后置元素

.com

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

前置元素

Http://

<el-input placeholder="请输入内容" :value.sync="input2">
  <template slot="prepend">Http://</template>
</el-input>

前置和后置元素

<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
  <el-select v-model="select" slot="prepend" :width="100">
    <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="search"></el-button>
</el-input>

尺寸

large

normal

small

mini

<el-input
  size="large"
  placeholder="请输入内容"
  :value.sync="input4">
</el-input>
<el-input
  placeholder="请输入内容"
  :value.sync="input4">
</el-input>
<el-input
  size="small"
  placeholder="请输入内容"
  :value.sync="input4">
</el-input>
<el-input
  size="mini"
  placeholder="请输入内容"
  :value.sync="input4">
</el-input>

API

参数	说明	类型	可选值	默认值
type	同原生的 input 的 type 属性，如果为textarea则显示为extarea	string
name	同原生的 input 的 name 属性	string
model	绑定值	string, number
maxlength	最大输入长度	number
minlength	最小输入长度	number
placeholder	输入框占位文本	string
disabled	禁用	boolean	true, false	false
readonly	禁用	boolean	true, false	false
size	输入框尺寸	string	large, small, mini
icon	输入框尾部图标	string
number	指定model值为number类型	boolean		false