Api

el-input

基本用法






1
2
3
4
5
6
7
8
9
10
11

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

禁用状态




1
2
3
4
5

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

<!— ## readonly 状态


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

## Input 图标

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

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

Input Group

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

后置元素





.com

1
2
3
4
5
6
7

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

前置元素



按钮



1
2
3
4
5
6
7

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

前置和后置元素




  • 选项一

  • 选项二

  • 选项三

  • 选项四



    • 搜索

    1
2
3
4
5
6
7
8
9
10

    <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




    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <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