[ Vue.js ] どこからでも呼び出せるモーダルの実装方法

フロントエンドのフレームワークを新たに使い始めるとき、ちょっとつまづくのがこの「モーダルの実装」じゃないでしょうか。
特に、コンポーネントに切り出してどこからでも関数一つで呼び出せるようにするところまでやるのって、意外とサンプルもなくて手間だったりします。
それをVue.jsで実装する方法をご紹介します。

 

モーダルのコンテナdivを用意

ここではこのapp.vueのrouter-viewにすべてのコンポーネントが入ってくると仮定します。
要は、どのページにいても表示されるテンプレートですね。
そこにモーダルのコンテナを用意して、modalsという配列をバインドしてコンポーネントが自動的に生成されるようにしています。

こうしておけば、modals配列にpush/popするだけでモーダルが出たり消えたりするわけです。

 

modals配列はVuexのストアで管理

このようにVuexのストアでmodals配列を管理することで、どのページ/コンポーネントからでも

この1行でモーダルをオープンできるようになります。

 

モーダルのコントロールをserviceで一元化

各コンポーネントから直接store.dispatchをコールしてもいいんですが、たとえばalertモーダルとかconfirmモーダルとか、タイプ別で汎用化していくことを視野に入れて、modalサービスを作成しそこにモーダル関連の関数をまとめることにします。

こういう感じです。
今回は実装しませんが、confirmモーダルや任意のコンポーネントをモーダルで開く関数をこのサービスに作っていくイメージです。

 

alertモーダルコンポーネント

メッセージを表示して、OKボタンで閉じるだけのalertモーダルを作ります。
vueファイルはこういう感じになります。

paramsというpropsを用意して、その中に
・表示したいメッセージ
・OKボタンをクリックしたときにコールバック
が入ってくる想定です。

関連CSSは以下の通りです。

 

そしてこのコンポーネントをグローバルコンポーネントに登録して、どこからでも呼び出せるようにしておきます。

これで仕込みは完了です。
あとは実際にテストページを作ってモーダルを開いてみましょう。

 

モーダルを開くテストページ

テスト用のコンポーネントを作成し、ベースになるApp.vueのrouter-viewの中に表示されるようにしました。

これで、以下のような形でアラートモーダルが出せるかと思います。

 

モーダル呼び出し機能は最初に作っておくべし

いかがだったでしょうか。
こういう風に、汎用的なパーツは先にモジュールとして切り出しておくと、開発全体がぐっと楽になります。
特にこのモーダルのモジュール化は個人的には必須作業ですね。

ご参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る