2018年6月25日フロントエンドのフレームワークを新たに使い始めるとき、ちょっとつまづくのがこの「モーダルの実装」じゃないでしょうか。コンポーネントに切り出してどこからでも関数一つで呼び出せるようにするところまでやるのって、意外とサンプルもなくて手間だったりします。それをVue.jsで実装する方法をご紹介します。}</script>ここではこのapp.vueのrouter-viewにすべてのコンポーネントが入ってくると仮定します。要は、どのページにいても表示されるテンプレートですね。そこにモーダルのコンテナを用意して、modalsという配列をバインドしてコンポーネントが自動的に生成されるようにしています。しておけば、modals配列にpush/popするだけでモーダルが出たり消えたりするわけです。modal)この1行でモーダルをオープンできるようになります。各コンポーネントから直接store.dispatchをコールしてもいいんですが、たとえばalertモーダルとかconfirmモーダルとか、タイプ別で汎用化していくことを視野に入れて、modalサービスを作成しそこにモーダル関連の関数をまとめることにします。}}こういう感じです。今回は実装しませんが、confirmモーダルや任意のコンポーネントをモーダルで開く関数をこのサービスに作っていくイメージです。alertモーダルコンポーネントメッセージを表示して、OKボタンで閉じるだけのalertモーダルを作ります。vueファイルはこういう感じになります。}}</script>paramsというpropsを用意して、その中に・表示したいメッセージ・OKボタンをクリックしたときにコールバックが入ってくる想定です。関連CSSは以下の通りです。scale(1.1);}そしてこのコンポーネントをグローバルコンポーネントに登録して、どこからでも呼び出せるようにしておきます。ModalAlert);・・・これで仕込みは完了です。あとは実際にテストページを作ってモーダルを開いてみましょう。]});・・・テスト用のコンポーネントを作成し、ベースになるApp.vueのrouter-viewの中に表示されるようにしました。これで、以下のような形でアラートモーダルが出せるかと思います。モーダル呼び出し機能は最初に作っておくべしいかがだったでしょうか。いう風に、汎用的なパーツは先にモジュールとして切り出しておくと、開発全体がぐっと楽になります。このモーダルのモジュール化は個人的には必須作業ですね。ご参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Inc.横浜/札幌で活動しているWEBクリエイター/デベロッパーです。WEBアプリ開発、WEBサイト制作、プランニング、コンサルティングまで承ります。東京の広告代理店でWEBディレクター&プランナー&エンジニアとして6年勤務の後、札幌に移住・独立して現在10年目。2019年4月より横浜にも拠点を置いて活動しています。エンジニアですが、職歴を活かしてIT全般、コンサル/企画から制作/開発まで承っています。デザインからCMS構築まで一貫して承る、いわゆるフルスタック案件が多いです。純エンジニア案件としては、PHP/JSでのWEBアプリ・EC・ソーシャルブラウザゲーム・WordPressカスタムなど。公開できない実績多数あります。詳細ご希望の方、何かご相談おありの方、お気軽にお問い合わせください。ご連絡はこちらよりお願いいたします。キーを押して検索します。