vue 드 롭 다운 목록 의 두 가지 실현 방식 비교
첫 번 째 는 v-for 방식 을 채택 합 니 다.
<el-select v-model="form.columeType" placeholder=" ">
<el-option v-for="(item,index) in columeTypeArr" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
data(){
return {
columeTypeArr:[{
value:'String',
label:' '
},{
value:'Int',
label:' ',
},{
value:'Decimal',
label:' '
}],
}
}
그냥 select 에 죽 었 다 고 써.
<el-select v-model="form.fileOrgType" placeholder=" ">
<el-option label=" " value="Y"> </el-option>
<el-option label=" " value="N"></el-option>
</el-select>두 가지 방식 모두 차이 가 많 지 않 습 니 다.다만 첫 번 째 방식 은 data 에서 설정 해 야 합 니 다.데이터 가 배경 에서 다시 나타 나 야 하 는 상황 에 대해 첫 번 째 방법 이 좋 습 니 다.
간단 한 드 롭 다운 목록 의 매개 변수 가 적은 경우 두 번 째 는 뚜렷하게 우세 하 다.
vue 드 롭 다운 메뉴 구성 요소 구현
우 리 는 vue 의 드 롭 다운 메뉴 구성 요 소 를 함께 실현 합 니 다.
이런 기본 UI 구성 요 소 는 인터넷 에 이미 많이 있 는데 왜 스스로 실현 해 야 합 니까?사실 바퀴 를 반복 적 으로 만 들 려 는 것 이 아니 라 이 과정 을 통 해 vue 구성 요소 개발 의 세부 사항 과 주의사항 을 되 돌아 보고 싶 습 니 다.
왜 드 롭 다운 메뉴 구성 요 소 를 선택 하 셨 습 니까?
왜냐하면 참 새 는 작 지만 오장 이 모두 갖 추어 져 있 기 때문에 이 작은 구성 요 소 는 많은 vue 구성 요소 개발 의 지식 과 관련된다.
자,그럼 시작 합 시다!
먼저 vue-cli 프로젝트 를 만 듭 니 다.필 자 는 vue-cli 3 를 사용 합 니 다.생 성 과정 약 을 사용 한 다음 vue 구성 요 소 를 만 듭 니 다:DropDownlist.vue
템 플 릿 을 작성 하기 전에 이 구성 요소 의 보기 구조 와 기능 을 분석 합 니 다.
드 롭 다운 메뉴 구성 요 소 는 두 부분 으로 구성 되 어야 합 니 다.
선택 한 텍스트
선택 대기 메뉴(기본 숨 김)
그것 의 주요 기능 은 다음 과 같다.
마우스 가 드 롭 다운 메뉴 구성 요 소 를 지나 선택 할 메뉴 를 표시 합 니 다.
마우스 로 드 롭 다운 메뉴 구성 요 소 를 끌 어 내 고 선택 할 메뉴 를 숨 깁 니 다.
선택 한 메뉴 의 항목 을 마우스 로 클릭 하고 선택 한 텍스트 업데이트,구성 요소 할당 change 이벤트
우 리 는 다음 과 같은 템 플 릿 을 작성 합 니 다.
<template>
<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
<span> <i></i></span>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</template>우 리 는 루트 요소 div 에 마우스 가 지나 가 고 미 끄 러 지 는 반전 함 수 를 추 가 했 습 니 다.구체 적 으로 다음 과 같 습 니 다.
다음은 이 드 롭 다운 메뉴 에 스타일 을 만 들 고 템 플 릿 아래 에 style 탭 을 추가 합 니 다.다른 구성 요소 의 스타일 과 충돌 하지 않도록 구성 요 소 를 개발 할 때 style 에 scoped 속성 을 추가 하 는 것 을 권장 합 니 다.또한 필 자 는 여기 서 scss 를 사 용 했 는데 구체 적 인 코드 는 다음 과 같다.
<style scoped lang="scss">
.zq-drop-list{
display: inline-block;
min-width: 100px;
position: relative;
span{
display: block;
height: 30px;
line-height: 30px;
background: #f1f1f1;
font-size: 14px;
text-align: center;
color: #333333;
border-radius: 4px;
i{
background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
margin-left: 6px;
display: inline-block;
}
}
ul{
position: absolute;
top: 30px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
border: solid 1px #f1f1f1;
border-radius: 4px;
overflow: hidden;
li{
list-style: none;
height: 30px;
line-height: 30px;
font-size: 14px;
border-bottom: solid 1px #f1f1f1;
background: #ffffff;
}
li:last-child{
border-bottom: none;
}
li:hover{
background: #f6f6f6;
}
}
}
</style>그 i 요소 의 스타일 은 제 가 인터넷 그림 을 사 용 했 습 니 다.여러분 이 직접 바 꿀 수 있 습 니 다.
선택 한 메뉴 얼 은 css 에서 숨 기지 않 았 습 니 다.js 를 통 해 제어 해 야 하기 때 문 입 니 다.구체 적 인 이 유 는 다음 과 같 습 니 다.
선택 한 메뉴 얼 은 절대 포 지 셔 닝 을 사 용 했 습 니 다.펼 칠 때 페이지 의 다른 요소 의 레이아웃 에 영향 을 주지 말 아야 하기 때 문 입 니 다.
현재 이 구성 요 소 는 대략 이렇게 생 겼 습 니 다.
우 리 는 이 구성 요소 에 속성 을 계속 정의 합 니 다.선택 한 메뉴 는 속성 으로 들 어 와 야 합 니 다.내부 에서 죽 어 서 는 안 됩 니 다.속성 정 의 는 다음 과 같 습 니 다.
<script>
export default {
name: "DropDownList",
props:{
dataList:{
type:Array,
default(){
return [
{name: " "},
{name: " "}
]
}
},
labelProperty:{
type:String,
default(){ return "name" }
}
},
data(){
return {
activeIndex:0
}
},
}또 다른 속성 은 labelProperty 입 니 다.이 속성의 역할 은 무엇 입 니까?실제 프로젝트 의 데이터 원본 에 name 필드 가 포함 되 어 있 는 것 은 아 닙 니 다.따라서 드 롭 다운 메뉴 에서 데 이 터 를 렌 더 링 할 수 없 는 텍스트 를 만 들 수 있 습 니 다.따라서 이 속성 은 실제 데이터 원본 렌 더 링 텍스트 의 필드 를 지정 하 는 데 사 용 됩 니 다.이 필드 는 문자열 이 어야 합 니 다.이 속성의 기본 값 은 name 입 니 다.기본 데이터 원본 과 일치 해 야 하기 때 문 입 니 다.구성 요소 내부 데이터 도 보 았 을 거 라 고 믿 습 니 다.activeIndex 는 현재 선택 한 항목 의 색인 을 표시 하 는 데 사 용 됩 니 다.나중에 사용 할 것 입 니 다.
이제 우 리 는 다른 곳 에서 이 구성 요 소 를 도입 하고 사용 할 수 있 습 니 다.비록 그것 이 아직 완성 되 지 않 았 지만,우 리 는 먼저 그것 을 인터페이스 에 표시 하 는 것 이 좋 습 니 다.
<template>
<div class="home">
<DropList :dataList="dplist" labelProperty="city" @change="onDpChange($event)"></DropList>
<p> </p>
</div>
</template>
<script>
import DropList from '@/components/DropDownList.vue'
//
</script>이제 우 리 는 구성 요소 의 템 플 릿 부분 으로 돌아 가 정적 내용 인 것 을 발 견 했 습 니 다.우 리 는 이 정적 내용 을 속성 을 통 해 렌 더 링 하 는 것 으로 바 꾸 었 습 니 다.
<template>
<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
<span>{{dplLable}}<i></i></span>
<ul>
<li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
</ul>
</div>
</template>선택 한 텍스트 표현 식 을 보 겠 습 니 다:dplLabel,이 속성 을 정의 하지 않 았 습 니 다.내부 데 이 터 를 정의 하지 않 았 습 니 다.어디서 났 습 니까?선택 한 텍스트 는 dataList[activeIndex][label Property]입 니 다.
computed:{
dplLable(){
return this.dataList[this.activeIndex][this.labelProperty]
}
}현재 드 롭 다운 메뉴 의 보기 와 데이터 관련 부분 을 다 썼 습 니 다.다음은 기능 을 수행 해 야 합 니 다.
첫 번 째 단 계 는 선택 한 메뉴 를 기본적으로 숨 기 는 것 입 니 다.여 기 는 왜 css 의 display:none 을 직접 사용 하지 않 습 니까?그리고 마우스 가 지나 갈 때 display:block 이면 되 지 않 습 니까?이렇게 되면 선택 한 메뉴 항목 을 클릭 할 때 숨 기 고 체험 할 수 없 기 때문이다.저 희 는 js 로 제어 하지만 vue 는 dom 요 소 를 직접 방문 하 는 것 에 좋 지 않 습 니 다.구성 요소 가 초기 화 될 때 dom 요 소 를 방문 하려 면 가장 편리 한 방법 이 있 습 니 다.그것 은 바로 사용자 정의 명령 입 니 다.
드 롭 다운 메뉴 구성 요소 에 부분 사용자 정의 명령 을 추가 합 니 다.코드 는 다음 과 같 습 니 다.
directives:{
dpl:{
bind(el){
el.style.display = "none";
}
}
},
<ul v-dpl>처음에 드 롭 다운 메뉴 에 정 의 된 마우스 경과 와 마우스 가 미 끄 러 지 는 감청 을 계속 실현 하여 선택 한 메뉴 의 표시 와 숨 김 을 실현 합 니 다.
onDplOver(event){
let ul = event.currentTarget.childNodes[1];
ul.style.display = "block";
},
onDplOut(event){
let ul = event.currentTarget.childNodes[1];
ul.style.display = "none";
},마지막 으로 선택 한 메뉴 항목 의 클릭 이 벤트 를 실현 합 니 다.클릭 한 후 선택 한 메뉴 를 숨 기 고 내부 상 태 를 수정 하여 change 이 벤트 를 보 냅 니 다.
onLiClick(index){
let path = event.path || (event.composedPath && event.composedPath()) // safari
path[1].style.display = "none";
this.activeIndex = index;
this.$emit("change", {
index:index,
value:this.dataList[index]
})
}전체 코드 는 다음 과 같 습 니 다:
<template>
<div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
<span>{{dplLable}}<i></i></span>
<ul v-dpl>
<li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "DropDownList",
data(){
return {
activeIndex:0
}
},
props:{
dataList:{
type:Array,
default(){
return [
{name: " "},
{name: " "}
]
}
},
labelProperty:{
type:String,
default(){ return "name" }
}
},
directives:{
dpl:{
bind(el){
el.style.display = "none";
}
}
},
methods:{
onDplOver(event){
let ul = event.currentTarget.childNodes[1];
ul.style.display = "block";
},
onDplOut(event){
let ul = event.currentTarget.childNodes[1];
ul.style.display = "none";
},
onLiClick(index){
let path = event.path || (event.composedPath && event.composedPath()) // safari
path[1].style.display = "none";
this.activeIndex = index;
this.$emit("change", {
index:index,
value:this.dataList[index]
})
}
},
computed:{
dplLable(){
return this.dataList[this.activeIndex][this.labelProperty]
}
}
}
</script>
<style scoped lang="scss">
.zq-drop-list{
display: inline-block;
min-width: 100px;
position: relative;
span{
display: block;
height: 30px;
line-height: 30px;
background: #f1f1f1;
font-size: 14px;
text-align: center;
color: #333333;
border-radius: 4px;
i{
background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
margin-left: 6px;
display: inline-block;
}
}
ul{
position: absolute;
top: 30px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
border: solid 1px #f1f1f1;
border-radius: 4px;
overflow: hidden;
li{
list-style: none;
height: 30px;
line-height: 30px;
font-size: 14px;
border-bottom: solid 1px #f1f1f1;
background: #ffffff;
}
li:last-child{
border-bottom: none;
}
li:hover{
background: #f6f6f6;
}
}
}
</style>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
