Element Input 입력 상자 사용 방법
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 입력 상자의 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ElementUI 기본 스타일을 수정하는 몇 가지 방법(소결)ElementUI는 ui 구성 요소 라이브러리로 현재 최신 버전react와 vue 등 주류 프레임워크를 지원합니다.이 라이브러리의 기본 테마색은 하늘색입니다. 프로젝트 개발에 사용할 경우 기본 스타일을 수정해야 하는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.