Form-input输入框

你的名字 2022-03-31 19:11 390阅读 0赞

**1、基本使用**

v-model：绑定的值，string / number

size：指定输入框的尺寸，除了默认的medium大小外，还提供了 large、small 和 mini 三种尺寸。输入框尺寸，只在 `type!="textarea"`时有效；仅控制高度，所以这里使用style控制了宽度

clearable：是否可清空，boolean

<el-input
        style="width: 180px;"
        v-model="listQuery.title"
        placeholder="名称"
        size="small"
        clearable
        @keyup.enter.native="handleFilter">
     </el-input>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            listQuery:{
             title: ''
            }
          }
        },
        methods: {
          handleFilter() {
            alert('Vue中的监听键盘回车事件')
          }
        }
      })
    </script>

**二、 带 icon 的输入框**  
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

![20190307235126831.png][]

**三、 用于输入多行文本信息**

type： 类型，text，textarea 和其他 [原生 input 的 type 值][input _ type]，默认text

文本域高度可通过 rows 属性控制；

<el-input
        type="textarea"
        :rows="2"
        v-model="textarea"
        placeholder="多行文本域">
    </el-input>

**四、 复合型输入框**

可前置或后置元素，一般为标签或按钮  
可通过 slot 来指定在 input 中前置或者后置内容。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<div>
      <el-input placeholder="请输入内容" v-model="input3">
        <template slot="prepend">Http://</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input4">
        <template slot="append">.com</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <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>
    <style>
      .el-select .el-input {
        width: 130px;
      }
      .input-with-select .el-input-group__prepend {
        background-color: #fff;
      }
    </style>

### Input Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>string / number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>类型</td> 
   <td>string</td> 
   <td>text，textarea 和其他&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types" rel="nofollow">原生 input 的 type 值</a></td> 
   <td>text</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>输入框占位文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否可清空</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸，只在&nbsp;<code>type!="textarea"</code>时有效</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>prefix-icon</td> 
   <td>输入框头部图标</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>suffix-icon</td> 
   <td>输入框尾部图标</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>rows</td> 
   <td>输入框行数，只对&nbsp;<code>type="textarea"</code>有效</td> 
   <td>number</td> 
   <td>—</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>show-password</td> 
   <td>是否显示切换密码图标</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>原生属性，是否只读</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

### Input Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>blur</td> 
   <td>在 Input 失去焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>在 Input 获得焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>在 Input 值改变时触发</td> 
   <td>(value: string | number)</td> 
  </tr> 
  <tr> 
   <td>clear</td> 
   <td>在点击由&nbsp;<code>clearable</code>&nbsp;属性生成的清空按钮时触发</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### Input Methods ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>使 input 获取焦点</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>使 input 失去焦点</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>选中 input 中的文字</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

[20190307235126831.png]: /images/20220331/9b0adf0ce17d4556ba0575d4be5ebdce.png
[input _ type]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220331/1c16f7a8e92847f3aef9ed9db7ba10f9.png