Element Input输入框如何使用

时间:2020-07-26 究极死胖兽人气:1

本文着重讲解了Element Input输入框如何使用，文中通过代码实例讲解的非常细致，对大家的工作和学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文来源于Element官方文档：

http://element-cn.eleme.io/

基础用法

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

<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	点击选中建议项时触发	选中建议项

加载全部内容