도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.
안녕하세요 상훈입니다.
모달팝업을 만드는 방법을 포스팅하려고 합니다.
추가적으로 바깥 영역을 클릭했을 때 모달이 사라지게 하고 싶습니다.
1) Modal Show 버튼을 클릭 시 Modal Popup 출력.
2) 바깥영역, close 버튼을 클릭 시 Modal Popup 숨김.
이 두 가지 동작이 가능하게 하려고합니다.
// App.vue > 모달 창을 포함하고 있는 메인 뷰
<template>
<div>
<button type="button" @click="showModal">Modal Show</button>
<ModalView
v-show="showStatus"
v-model="showStatus"
@closeModal="closeModal"
/>
</div>
</template>
<script>
import ModalView from "./Modal.vue";
export default {
components: {
ModalView,
},
data() {
return {
showStatus: false,
};
},
methods: {
showModal() {
this.showStatus = true;
},
closeModal() {
this.showStatus = false;
},
},
};
</script>showStatus 라는 ref 를 기본 값으로 false 로 놓고, true가 되었을 때만 팝업이 뜨도록 처리하려고 합니다.
이벤트 핸들러가 호출하는 메서드로 showModal() 과 closeModal() 을 생성하였습니다.
직관적으로 show는 show를, close는 close를 작성하여 shoStatus 의 값을 true/false로 변경하겠습니다.
// Modal.vue
<template>
<div class="modal-view" @click="closeModal">
<div class="modal-view-area" @click.stop="">
<h2 class="modal-text-header">Modal View</h2>
<div class="block-content"></div>
<div class="modal-bottom">
<button class="modal-btn" @click="closeModal">Close</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: { showStatus: Boolean },
methods: {
closeModal() {
this.$emit("closeModal");
},
},
};
</script>props로 showStatus를 전달받아 바깥영역, 닫기 버튼을 클릭하면 $emit을 통해 closeModal 이벤트를 발생시킵니다.
그리고 App.vue에서 closeModal 메서드를 호출하게 되어 모달 팝업을 숨김처리합니다.
다른건 다 그렇다고 치고, 코드를 자세히 살펴보시면, 특별한 처리를 하지 않았는데, 모달창의 영역을 클릭하였을 때는 팝업이 안닫히지만, 그 외의 영역을 클릭하였을 때는 닫히는 것을 볼 수 있습니다.
처음에는 css의 z-index 를 설정하면 영역 컨트롤이 가능한줄 알고 열심히 z-index를 설정했었죠.
그러나 vue.js 공식 문서에 숨겨져있는 한 내용을 확인하게되었습니다.
바로 이 부분입니다.
<div class="modal-view" @click="closeModal">
<div class="modal-view-area" @click.stop="">바로 @click.stop 입니다. 이게 바로 핵심.
@click.stop을 작성해준 부분의 영역은 클릭이벤트 전부를 멈추게 만듭니다.
추가적으로 button에 @click 이벤트 핸들러를 제공한것처럼 명시하지 않는다면 말이죠.
이렇게 작성해주시면, 모달 영역을 클릭해도 닫히지 않는 모습을 보여줍니다.
이상입니다.
도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.
'FrontEnd > Vue.js' 카테고리의 다른 글
| [Nuxt3, TailwindCss, TS] 기본 설정 (0) | 2022.12.08 |
|---|---|
| [Vue.js] vue route 사용하여 파라미터 전달하기 / 객체(Object) 전달하기 (0) | 2022.11.08 |
| [ Vue.js ] props 의 대용, Redux, Vuex 의 기초 단계 / Reactive (0) | 2022.10.27 |
| [ Vue.js ] Child Component TO Parent Component / 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 / TodoList - Add (0) | 2022.10.26 |
| [ Nuxt.js ] Nuxt.js 에서 Component 삽입하는 방법 (0) | 2022.02.27 |
