vue 다양한 탄 상자 의 팝 업 형식의 예제 코드
dlAddProd 탄 상자(dlAddProd.vue)를 도입 합 니 다.
이 므 로 products 페이지 에 불 러 올 때 dlAddProd 가 불 러 옵 니 다.그러나 el-dialog 의 body 부분 은 불 러 오지 않 습 니 다(v-if 명령 이 있 든 없 든).dlAddProd 탄 상자 에 dlBlankAdd 탄 상자 와 dlEditProd 탄 상자 가 추가 되 었 습 니 다.그러나 이 때 dlBlankAdd 만 불 러 옵 니 다.dlEditProd 는 불 러 오지 않 습 니 다(
).
2.주의 하 는 곳
element-UI 의 탄 상자 구성 요소 인 el-dialog 가 바디 부분 에 탄 상자 B 를 추가 하면 탄 상자 B 가 나 올 때 B 와 부 탄 상자 가 동시에 가 려 지 는 문제(https://jsfiddle.net/Irene_Ta..................................................
유형 1:A 탄 상자 에서 B 탄 상자 가 나 오 는 유형
유형 2:탄 상자 body 변환 유형(A 탄 상자 의 단 추 를 누 르 면 body 는 C 에서 D 로 변 하지만 같은 탄 상자 입 니 다.그리고 이때 탄 상자 에 반환 키 가 나타 나 고 반환 키 를 누 르 면 body 는 다시 C 로 돌아 갑 니 다.닫 기 단 추 를 누 르 면 탄 상자 가 사라 집 니 다).body C 를 통 해 누 른 탄 상자 든 body D 를 누 른 탄 상자 든 A 탄 상자 와 병렬 되 어야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
2.주의 하 는 곳
element-UI 의 탄 상자 구성 요소 인 el-dialog 가 바디 부분 에 탄 상자 B 를 추가 하면 탄 상자 B 가 나 올 때 B 와 부 탄 상자 가 동시에 가 려 지 는 문제(https://jsfiddle.net/Irene_Ta..................................................
<template>
<div v-show="visibleA"> v-if="visibleA"
<el-dialog v-model="visibleA" ref="dialogA"><el-dialog>
<el-dialog v-model="visibleB" ref="dialogB"><el-dialog>
</div>
</template>
<template>
<div v-show="visibleA"> v-if="visibleA"
<el-dialog v-model="visibleA" ref="dialogA"><el-dialog>
<el-dialog v-model="visibleB" ref="dialogB"><el-dialog>
</div>
</template>
<script>
import dialogB from './dialogB.vue'
export default {
components: {
dialogB
}
}
</script>유형 1:A 탄 상자 에서 B 탄 상자 가 나 오 는 유형
유형 2:탄 상자 body 변환 유형(A 탄 상자 의 단 추 를 누 르 면 body 는 C 에서 D 로 변 하지만 같은 탄 상자 입 니 다.그리고 이때 탄 상자 에 반환 키 가 나타 나 고 반환 키 를 누 르 면 body 는 다시 C 로 돌아 갑 니 다.닫 기 단 추 를 누 르 면 탄 상자 가 사라 집 니 다).body C 를 통 해 누 른 탄 상자 든 body D 를 누 른 탄 상자 든 A 탄 상자 와 병렬 되 어야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
