首页 | 编程 | Java

Element Input输入框的使用方法

2020年07月26日 作者：究极死胖兽原文

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/input

基础用法

带图标的输入框（属性方式）

<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">.com</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-complete 原生属性，自动补全 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输入框内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接