frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.jsのmodalで背景をクリックで閉じる、複数のモーダルを表示するためには?

スポンサードリンク


スポンサードリンク


公式のmodalは問題あり

公式のmodalは下記のようになっています。


See the Pen
ZEzbaQb
by funclur (@funclur)
on CodePen.

しかしこれだと2点の問題があります。

それは

  • 背景クリックで閉じない
  • 複数のモーダルが作れない

ということです。

そのためこの記事ではVue.jsのモーダルに背景をクリックで閉じる、複数のモーダルが表示できるようにしたいと思います。

背景クリックで閉じる

背景クリックで閉じるようにするためには以下のようにします。

<div class="modal-wrapper" @click="$emit('close')">

背景を表示しているdivに閉じるアクションを追加します。
しかしこれでは、モーダル内のコンテンツをクリックしても閉じてしまうのでモーダル外をクリックしたときのみ閉じるようにしたいです。

<div class="modal-wrapper" @click.self="$emit('close')">

完成したデモは下記です。


See the Pen
dybYZMZ
by funclur (@funclur)
on CodePen.


複数のモーダル

複数のモーダルを作る場合はdataを複数作る必要があります。
こちらもデモにしましたので参照ください。


See the Pen
QWLjeOp
by funclur (@funclur)
on CodePen.