【モーダル】Vue.jsで作成したモーダルの外側をクリックした時に閉じるようにする
今回はVue.jsで作成したモーダルの外側をクリックした時に、そのモーダルを閉じる方法を解説します。
以下のページでは、Vue.jsを使ったモーダルの作成方法と、今回の記事内容をより詳細に解説しています。
興味のあり方はご覧ください。
selfを使う
モーダルの実装方法は公式ドキュメントにも記載がありますので、作成時には参考にして下さい。
jp.vuejs.org
例えば、以下のようなモーダルがあったとします。
<div class="modal-mask"> <div class="modal-container"> <div class="modal-body"> <p>モーダルです。</p> </div> <div class="modal-footer"> <button @click="closeModal()">閉じる</button> </div> </div> </div>
closeModal( )がモーダルを閉じる処理だとします。
モーダル自体が「.modal-container」の要素で、その外側が「.modal-mask」です。
今回は、この「.modal-mask」をクリックするとモーダルが閉じるようにします。
普通に実装するのであれば、「.modal-mask」にもクリックイベントをつけて、以下のようにします。
<div class="modal-mask" @click="closeModal()"> <div class="modal-container"> <!-- 省略 --> </div> </div>
ですがこれは不具合の原因となるので、イベント修飾子の「.self」を使うようにしましょう。
不具合については後ほどご説明します。
イベント修飾子の「.self」とは、自分自身の要素以外にはそのイベントを伝播させないという意味があります。
「.self」修飾子は、自分自身の要素以外にはそのイベントを伝播させない
つまり、
<div class="modal-mask" @click.self="closeModal()"> <div class="modal-container"> <!-- 省略 --> </div> </div>
とすることで不具合なく動きます。
selfを使わないとどうなるか
先程言及した不具合ですが、子要素をクリックした時にも、モーダルが閉じるようになってしまうということです。
「.self」修飾子を使わないと子要素にもそのイベントを伝播してしまう
例えば、「.self」修飾子を使わないモーダルの中にリンクがあったとします。
そのリンクをクリックした時には、モーダルが閉じる挙動が優先され、リンク先に遷移できないなどの不具合が生じる可能性があります。
(実装パターンによってはリンクが優先されるパターンもあります。)
モーダルの外側を押した時だけ閉じるようにするには「.self」修飾子を使う
このように、不具合の原因となりますのでご注意ください。
ご自分の実装に合わせて「.self」を使ってみましょう。
以下のページでは、Vue.jsを使ったモーダルの作成方法と、今回の記事内容をより詳細に解説しています。
興味のあり方はご覧ください。
