Input 输入框
通过鼠标或键盘输入字符
基础用法
<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
data() {
return {
input: ''
</script>禁用状态
通过
disabled
属性指定是否禁用 input 组件
<el-input
placeholder="请输入内容"
v-model="input1"
:disabled="true">
</el-input>
<script>
export default {
data() {
return {
input1: ''
</script>可清空
使用
clearable
属性即可得到一个可清空的输入框
<el-input
placeholder="请输入内容"
v-model="input10"
clearable>
</el-input>
<script>
export default {
data() {
return {
input10: ''
</script>带 icon 的输入框
带有图标标记输入类型
可以通过
prefix-icon
和
suffix-icon
属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
<div class="demo-input-suffix">
属性方式：
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input2">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input21">
</el-input>
<div class="demo-input-suffix">
slot 方式：
<el-input
placeholder="请选择日期"
v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<script>
export default {
data() {
return {
input2: '',
input21: '',
input22: '',
input23: ''
</script>文本域
用于输入多行文本信息，通过将
type
属性的值指定为 textarea。
文本域高度可通过
rows
属性控制
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
</script>可自适应文本高度的文本域
通过设置
autosize
属性可以使得文本域的高度能够根据文本内容自动进行调整，并且
autosize
还可以设定为一个对象，指定最小行数和最大行数。
<el-input
type="textarea"
autosize
placeholder="请输入内容"
v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="textarea3">
</el-input>
<script>
export default {
data() {
return {
textarea2: '',
textarea3: ''
</script>复合型输入框
可前置或后置元素，一般为标签或按钮
可通过 slot 来指定在 input 中前置或者后置内容。
<div>
<el-input placeholder="请输入内容" v-model="input3">
<template slot="prepend">Http://</template>
</el-input>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input4">
<template slot="append">.com</template>
</el-input>
<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>
<style>
.el-select .el-input {
width: 130px;
.input-with-select .el-input-group__prepend {
background-color: #fff;
</style>
<script>
export default {
data() {
return {
input3: '',
input4: '',
input5: '',
select: ''
</script>尺寸
-
可通过
size
属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。
<div class="demo-input-size">
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input6">
</el-input>
<el-input
size="medium"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input7">
</el-input>
<el-input
size="small"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input8">
</el-input>
<el-input
size="mini"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input9">
</el-input>
<script>
export default {
data() {
return {
input6: '',
input7: '',
input8: '',
input9: ''
</script>带输入建议
根据输入内容提供对应的输入建议
autocomplete 是一个可带输入建议的输入框组件，
fetch-suggestions
是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。