Element-ui学习笔记3--Form表单（二）
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">
slot 方式： <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
<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"> </i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>
使用slot可以自定义建议输出模板，scope的参数为item
this.timeout = setTimeout(() => { cb(results); }, 3000 * Math.random());
模拟延迟查询数据的效果
placement设置菜单弹出位置，可选项top,top-start,top-end,bottom,bottom-start,bottom-end
select-when-unmatched 在输入没有任何匹配建议的情况下，按下回车是否触发 select事件 默认false
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。
<el-input type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit >
参考地址：https://element.eleme.cn/#/zh-CN/component/input
