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

좋은 웹페이지 즐겨찾기