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=" "
  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
―
이
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 입력 상자의 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!