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

前置和后置元素可以是任何东西， 通过使用.el-input-group__label可以声明附加元素是一个标签从而获得合适的样式。

后置元素

.com

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

前置元素

按钮

<el-input-group>
  <el-button slot="prepend" type="text">按钮</el-button>
  <el-input
    placeholder="请输入内容"
    :value.sync="input2">
  </el-input>
</el-input-group>

前置和后置元素

选项一

选项二

选项三

选项四

搜索

<el-input-group>
  <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li class="divider">选项四</li>
  </el-dropdown>
  <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
  <el-button type="text" slot="append">搜索</el-button>
</el-input-group>

尺寸

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