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