Input输入框

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

支持disabled

　　clearable（一键清空，默认false）

　　show-password（隐藏显示的密码输入框）

<el-input placeholder="请输入密码" v-model="input" show-password>
</el-input>
<script>
export default { data() { return { input: '' } } } 
</script>

使用icon

prefix-icon 首部添加icon

suffix-icon 尾部添加icon

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

可以用slot进行处理

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

type=‘textarea’，input文本域

可以用rows属性控制文本域高度

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

autosize,:autosize="{ minRows: 2, maxRows: 4}"

 

复合型输入框

<div> 
<el-input placeholder="请输入内容" v-model="input1">
<template slot="prepend">Http://</template> 
</el-input> 
</div> 
<div style="margin-top: 15px;"> 
<el-input placeholder="请输入内容" v-model="input2">
<template slot="append">.com</template> 
</el-input>
</div>
<div style="margin-top: 15px;"> 
<el-input placeholder="请输入内容" v-model="input3" 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>

可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。

 autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>
querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, 
createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; },

补充一下

filter方法，这里这么写是为了把queryString(input框的输入值)传参到内嵌的箭头函数去使用，filter函数的参数，前三个默认是调用元素，索引，对应的数组对象，没办法直接传参进该函数。

上面的箭头函数可以简写成

return restaurant =>

restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0

select
maxlength
minlength
text
textarea
maxlength
show-word-limit