はじめに
モーダルの「✖️」ボタンだけでなく、背景（オーバーレイ）をクリックしたときにも閉じられるようにしたい。
そんな時によく使う実装パターンを、Vueの機能を使う場合と、CSS(Tailwind)で制御する場合の2通りでまとめました。
この記事に向いている人
- Vue.js または Tailwind CSS を使っている人
- モーダルの実装において、背景クリックによる「閉じる」動作を実装したい人
1. Vueでの実装方法（修飾子を使う）
Vueにはイベント修飾子 .self が用意されています。これを使うのが最もシンプルな気がします。
click.self の利用
要素そのもの（self）がクリックされた時だけイベントを発火し、子要素（モーダルの中身）がクリックされた時は発火しないようにします。
<script setup>
const closeModal = () => {
// 閉じる処理
}
</script>
<template>
<div @click.self="closeModal">
<ModalComponent />
</div>
</template>
2. Tailwind CSSを用いた実装方法（CSSで制御する）
フレームワークの機能に頼らず、CSSのプロパティで制御するアプローチです。 「親要素のクリックは検知したいが、子要素のクリックは無視（透過）させたい」といった複雑な制御が必要な場合に pointer-events プロパティを活用します。
pointer-events-... を用いる記述
親要素（背景）にクリックイベントを設定。
ラッパーに pointer-events-none を設定し、クリック判定を無効化（スルー）させる。
実際に触らせたいモーダル本体に pointer-events-auto を設定し、クリック判定を復活させる。
<div @click="closeModal">
<div class="pointer-events-none">
<ModalComponent class="pointer-events-auto"/>
</div>
</div>
終わりに
以上、2種類の実装パターンでした。 状況に合わせて使い分けてみてください。他にも良い実装方法があればコメントをお待ちしています！