Element Input輸入框的使用方法

更新時間：2020年07月26日 11:01:25 作者：究極死胖獸

這篇文章主要介紹了Element Input輸入框的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文來源于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="請輸入內(nèi)容"
  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="請輸入內(nèi)容"
  v-model="input23">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
 </el-input>

復合輸入框

<div>
 <el-input placeholder="請輸入內(nèi)容" v-model="input3">
  <template slot="prepend">Http://</template>
 </el-input>
</div>
<div>
 <el-input placeholder="請輸入內(nèi)容" v-model="input4">
  <template slot="append">.com</template>
 </el-input>
</div>
<div>
 <el-input placeholder="請輸入內(nèi)容" 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="請輸入內(nèi)容"
   @select="handleSelect"
  ></el-autocomplete>

<el-autocomplete
 popper-class="my-autocomplete"
 v-model="state2"
 :fetch-suggestions="querySearch"
 placeholder="請輸入內(nèi)容"
 @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 屬性：

參數(shù)	類型	說明	可選值	默認值
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	輸入框行數(shù)，只對 type=”textarea” 有效	number	—	2
autosize	自適應內(nèi)容高度，只對 type=”textarea” 有效，可傳入對象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
auto-complete	原生屬性，自動補全	string	on, off	off
name	原生屬性	string	—	—
readonly	原生屬性，是否只讀	boolean	—	false
max	原生屬性，設置最大值	—	—	—
min	原生屬性，設置最小值	—	—	—
step	原生屬性，設置輸入字段的合法數(shù)字間隔	—	—	—
resize	控制是否能被用戶縮放	string	none, both, horizontal, vertical	—
autofocus	原生屬性，自動獲取焦點	boolean	true, false	false
form	原生屬性	string	—	—
label	輸入框關(guān)聯(lián)的label文字	string	—	—
tabindex	輸入框的tabindex	string	-	-

input slot：

name	說明
prefix	輸入框頭部內(nèi)容，只對 type=”text” 有效
suffix	輸入框尾部內(nèi)容，只對 type=”text” 有效
prepend	輸入框前置內(nèi)容，只對 type=”text” 有效
append	輸入框后置內(nèi)容，只對 type=”text” 有效

input 事件：

事件名稱	說明	回調(diào)參數(shù)
blur	在 Input 失去焦點時觸發(fā)	(event: Event)
focus	在 Input 獲得焦點時觸發(fā)	(event: Event)
change	在 Input 值改變時觸發(fā)	(value: string 或 number)

input 方法：

方法名	說明	參數(shù)
focus	使 input 獲取焦點	-

Autocomplete 屬性：

參數(shù)	類型	說明	可選值	默認值
placeholder	輸入框占位文本	string	—	—
disabled	禁用	boolean	—	false
value-key	輸入建議對象中用于顯示的鍵名	string	—	value
value	必填值，輸入綁定值	string	—	—
debounce	獲取輸入建議的去抖延時	number	—	300
fetch-suggestions	返回輸入建議的方法，僅當你的輸入建議數(shù)據(jù) resolve 時，通過調(diào)用 callback(data:[]) 來返回它	Function(queryString, callback)	—	—
popper-class	Autocomplete 下拉列表的類名	string	—	—
trigger-on-focus	是否在輸入框 focus 時顯示建議列表	boolean	—	true
name	原生屬性	string	—	—
select-when-unmatched	在輸入沒有任何匹配建議的情況下，按下回車是否觸發(fā) select 事件	boolean	—	false
label	輸入框關(guān)聯(lián)的label文字	string	—	—
prefix-icon	輸入框頭部圖標	string	—	—
suffix-icon	輸入框尾部圖標	string	—	—