트윗 버튼을 클릭하면 tailwindcss를 활용해서 모달 팝업을 만들어보도록 하겠
TweetModal.vue -> 트윗 모달 컴포넌트를 만든다.
tailwindcss 홈페이지에 들어가면 무료로 제공되는 다양한 코드들이 있는데
그 중 아래의 예시를 사용해볼거임
https://tailwindui.com/components/application-ui/overlays/dialogs
Tailwind UI - Official Tailwind CSS Components & Templates
Beautiful UI components and templates by the creators of Tailwind CSS.
tailwindui.com
html코드를 받아서
template에 붙여넣기함
그리고
트윗 모달 컴포넌트를 import한 후 사용한다.
<!-- 트윗 모달 팝업 -->
<TweetModal v-if="showTweetModal" @close-modal="showTweetModal = false" />
</div>
</template>
트윗 버튼을 클릭하면 모달창이 띄워져야하므로
showTweetModal이라는 변수를 만들어서 초기값을 false로 지정한다.
const showTweetModal = ref(false);
return {
routes,
showProfileDropdown,
onLogout,
currentUser,
router,
showTweetModal,
};
트윗 버튼에 click 이벤트로 showTweetModal을 true로 변경해주어 모달창을 띄워준다.
<!-- 트윗 버튼 -->
<div class="w-full h-12 xl:pr-3 flex justify-center">
<button
@click="showTweetModal = true"
class="mt-3 bg-primary text-white xl:w-full w-12 h-12 rounded-full hover:bg-dark"
>
<span class="hidden xl:block">트윗</span>
<i class="fas fa-plus xl:hidden"></i>
</button>
</div>
다시 트윗 모달 컴포넌트로 돌아와서
필요없는 부분들은 정리해주고
모달창 밖의 배경을 클릭하면 모달창이 사라지도록
click 이벤트에 $emit으로 close-modal을 전달한다.
이는 하위 컴포넌트에 데이터를 전달하는 props와 달리
상위 컴포넌트에 데이터를 전달할 때 사용한다고 함
close-modal 과 같이 필요한 이름으로 전달해준다.
<template>
<div
class="relative z-10"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
@click="$emit('close-modal')"
>
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
></div>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div
class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
>
<div
@click.stop
class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
>
<div class="bg-white">
<div class="border-b border-gray-100 p-2">
<button
class="fas fa-times text-primary text-lg p-2 h-10 w-10 hover:bg-blue-50"
></button>
</div>
<!-- 트윗팅 섹션 -->
<div class="flex p-4">
<img
class="w-10 h-10 rounded-full hover:opacity-80 cursor-pointer"
/>
<div class="ml-2 flex-1 flex flex-col">
<textarea
v-model="tweetBody"
placeholder="무슨 일이 일어나고 있나요?"
class="w-full text-lg font-bold focus:outline-none mb-3 resize-none"
rows="5"
></textarea>
<div class="text-right">
<button
v-if="!tweetBody?.length"
class="bg-light text-sm font-bold text-white px-4 py-1 rounded-full"
>
트윗
</button>
<button
v-else
@click="onAddTweet"
class="bg-primary hover:bg-dark text-sm font-bold text-white px-4 py-1 rounded-full"
>
트윗
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const tweetBody = ref("");
return {
tweetBody,
};
},
};
</script>
그리고 @click.stop은
부모 태그의 close-modal로 인해서 자식 태그(흰색 모달창)에도 클릭을 하면 모달 창이 닫히게 된다.
하지만 우리가 원하는건 배경(회색) 부분만 클릭했을 경우에만 close-modal이 실행되어야 한다.
그러므로
.
아래의 코드와 같이 @click.stop을 통해 이 부분 부터는 click 이벤트를 중단하게 만들어서
트윗을 작성하는 흰색 카드를 클릭해도 모달창이 닫히지 않는
