【Vue.js】モーダルの外側をクリックした時に閉じる方法

こんにちは、 ゆうやです！

本記事では、「モーダルを簡単に実装できると聞いてやってみたけど、モーダルのコンテンツ外をクリックした時に閉じる方法が分からなくて困っている、、、」

という方に向けてその方法をご紹介します。

筆者はVue.jsを勉強中でまだモーダル実装でしか使用したことがないひよっこですので、なにか間違いがありましたら教えていただけると幸いです(^o^

それでは参りましょう。

モーダルのHTML構造

↓↓例えば以下のようなモーダルがあるとしましょう。

※CSSやJSは今回省略させていただきます。

<div class="Modal">
  <script type="text/x-template" id="modal">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div>モーダルの中身</div>
            <div @click="$emit('close')">☓</div>
          </div>
        </div>
      </div>
    </transition>
  </script>
</div>

Vue.js公式ドキュメントの「モーダルコンポーネントの例」で紹介されているような一般的なモーダルですね。

デフォルトでは、modal-container直下の「☓」をクリックした時のみモーダルが閉じる仕様になっています。

さて、それでは問題の「モーダルの外側をクリックしたら閉じる」という動作を実装していきましょう。

イベント修飾子 .self

jQueryで同じことを実装しようとすると、「その要素をクリックしたら要素自身にのみイベントを発火させる。子要素にはイベントを伝播させない」といったスクリプトを数行記述する必要がありましたが、Vue.jsではなんと1つの命令を追加するだけで実装できてしまいます！

その魔法の命令が、「イベント修飾子 .self」です。

この子を使って、「@click.self=”イベント名”」とモーダル要素に指定してあげれば終了です！

↓↓先程のモーダルのmodal-wrapperに追記！

<div class="Modal">
  <script type="text/x-template" id="modal">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper" @click.self="$emit('close')">
          <div class="modal-container">
            <div>モーダルの中身</div>
            <div @click="$emit('close')">☓</div>
          </div>
        </div>
      </div>
    </transition>
  </script>
</div>

参考記事

こちらの記事に助けられました(^o^)

まとめ

以上、Vue.jsで作ったモーダルの外側をクリックした時に閉じる方法をご紹介しました。

ご自身の用途にあわせてぜひ.self修飾子を使ってみてくださいまし(^o^)

最後までご高覧いただきありがとうございました！