ElementInput输⼊框的使⽤⽅法本⽂来源于Element官⽅⽂档：
基础⽤法
带图标的输⼊框（属性⽅式）
<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>
带图标的输⼊框（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>
复合输⼊框
<div>
<el-input placeholder="请输⼊内容" v-model="input3">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div>
<el-input placeholder="请输⼊内容" v-model="input4">
<template slot="append"></template>
</el-input>
</div>
<div>
<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>
</div>
带提⽰的输⼊框
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输⼊内容"
@select="handleSelect"
></el-autocomplete>
<el-autocomplete
popper-class="my-autocomplete"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输⼊内容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="props">
<div class="name">{{ props.item.value }}</div>
<span class="addr">{{ props.item.address }}</span> </template>
</el-autocomplete>
input 属性：
参数类型说明可选值默认值
type类型string text / textarea text
value绑定值string /
number
——
maxlength最⼤输⼊长度number——minlength最⼩输⼊长度number——placeholder输⼊框占位⽂本string——clearable是否可清空boolean—false disabled禁⽤boolean—false size输⼊框尺⼨，只在 type!=”textarea” 时有效string medium / small / mini—prefix-icon输⼊框头部图标string——suffix-icon输⼊框尾部图标string——rows输⼊框⾏数，只对 type=”textarea” 有效number—2
autosize⾃适应内容⾼度，只对 type=”textarea” 有效，可传⼊对象，如，{ minRows: 2, maxRows: 6 }boolean /
object
—false
auto-
onpaste不能用inputcomplete原⽣属性，⾃动补全string on, off off name原⽣属性string——readonly原⽣属性，是否只读boolean—false max原⽣属性，设置最⼤值———min原⽣属性，设置最⼩值———step原⽣属性，设置输⼊字段的合法数字间隔———
resize控制是否能被⽤户缩放string none, both, horizontal, vertical
—
autofocus原⽣属性，⾃动获取焦点boolean true, false false form原⽣属性string——label输⼊框关联的label⽂字string——tabindex输⼊框的tabindex string--
input slot：
name说明
prefix输⼊框头部内容，只对 type=”text” 有效
suffix输⼊框尾部内容，只对 type=”text” 有效
prepend输⼊框前置内容，只对 type=”text” 有效
append输⼊框后置内容，只对 type=”text” 有效
input 事件：
事件名称说明回调参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change在 Input 值改变时触发(value: string 或 number)
input ⽅法：
⽅法名说明参数
focus使 input 获取焦点-⽅法名说明参数
Autocomplete 属性：
参数类型说明可选
值
默认
值
placeholder输⼊框占位⽂本string——disabled禁⽤boolean—false value-key输⼊建议对象中⽤于显⽰的键名string—value value必填值，输⼊绑定值string——debounce获取输⼊建议的去抖延时number—300
fetch-suggestions返回输⼊建议的⽅法，仅当你的输⼊建议数据 resolve 时，通过调⽤callback(data:[]) 来返回它Function(queryString,
callback)
——
popper-class Autocomplete 下拉列表的类名string——trigger-on-focus是否在输⼊框 focus 时显⽰建议列表boolean—true name原⽣属性string——select-when-
unmatched在输⼊没有任何匹配建议的情况下，按下回车是否触发 select 事件boolean—false label输⼊框关联的label⽂字string——prefix-icon输⼊框头部图标string——suffix-icon输⼊框尾部图标string——
Autocomplete slots：
name说明
prefix输⼊框头部内容
suffix输⼊框尾部内容
prepend输⼊框前置内容
append输⼊框后置内容
Autocomplete 事件：
事件名称说明回调参数
select点击选中建议项时触发选中建议项
到此这篇关于Element Input输⼊框的使⽤⽅法的⽂章就介绍到这了，更多相关Element Input输⼊框内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论