通过鼠标或键盘输入字符

1.如何使用？

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

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

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

2.禁用状态

通过 disabled 属性指定是否禁用 input 组件

<el-inputplaceholder="请输入内容"v-model="input":disabled="true">
</el-input><script>
export default {data() {return {input: ''}}
}
</script>

3.可清空

使用clearable属性即可得到一个可清空的输入框

<el-inputplaceholder="请输入内容"v-model="input"clearable>
</el-input><script>export default {data() {return {input: ''}}}
</script>

4.密码框

使用show-password属性即可得到一个可切换显示隐藏的密码框

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

5.带 icon 的输入框

带有图标标记输入类型

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-input-suffix">属性方式：<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式：<el-inputplaceholder="请选择日期"v-model="input3"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>

6.文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

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

<el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="textarea">
</el-input><script>
export default {data() {return {textarea: ''}}
}
</script>

7.可自适应文本高度的文本域

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

<el-inputtype="textarea"autosizeplaceholder="请输入内容"v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="请输入内容"v-model="textarea2">
</el-input><script>
export default {data() {return {textarea1: '',textarea2: ''}}
}
</script>

8.复合型输入框

可前置或后置元素，一般为标签或按钮

可通过 slot 来指定在 input 中前置或者后置内容。

<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>
<style>.el-select .el-input {width: 130px;}.input-with-select .el-input-group__prepend {background-color: #fff;}
</style>
<script>
export default {data() {return {input1: '',input2: '',input3: '',select: ''}}
}
</script>

9.尺寸

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

<div class="demo-input-size"><el-inputplaceholder="请输入内容"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputsize="medium"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input2"></el-input><el-inputsize="small"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input3"></el-input><el-inputsize="mini"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input4"></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>

10. 带输入建议

根据输入内容提供对应的输入建议

/*autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。*/<el-row class="demo-autocomplete"><el-col :span="12"><div class="sub-title">激活即列出输入建议</div><el-autocompleteclass="inline-input"v-model="state1":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"></el-autocomplete></el-col><el-col :span="12"><div class="sub-title">输入后匹配输入建议</div><el-autocompleteclass="inline-input"v-model="state2":fetch-suggestions="querySearch"placeholder="请输入内容":trigger-on-focus="false"@select="handleSelect"></el-autocomplete></el-col>
</el-row>
<script>export default {data() {return {restaurants: [],state1: '',state2: ''};},methods: {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);};},loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },];},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}}
</script>

11.自定义模板

可自定义输入建议的显示

使用scoped slot自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。

<el-autocompletepopper-class="my-autocomplete"v-model="state":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"><iclass="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><style>
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
</style><script>export default {data() {return {restaurants: [],state: ''};},methods: {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);};},loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {this.restaurants = this.loadAll();}}
</script>

12.远程搜索

从服务端搜索数据

<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"
></el-autocomplete>
<script>export default {data() {return {restaurants: [],state: '',timeout:  null};},methods: {loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },];},querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout = setTimeout(() => {cb(results);}, 3000 * Math.random());},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}};
</script>

13.输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<el-inputtype="text"placeholder="请输入内容"v-model="text"maxlength="10"show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea"placeholder="请输入内容"v-model="textarea"maxlength="30"show-word-limit
>
</el-input><script>
export default {data() {return {text: '',textarea: ''}}
}
</script>

以上就是input输入框的大致内容，若想深入浅出可以前往输入框