" />

スポンサーリンク

未分類

Vue.jsでモーダルダイアログを作る方法

更新日:

なぜ、モーダルが必要か?

モーダル(ダイアログ)は業務アプリで必ず使いますよね。ですが、経験上、案件によってその実装方法はバラバラだったりします。Vue.jsでモーダルを実現する方法をいくつか解説します。

業務アプリで必ず使うのですが、

1.Vue.js+Bootstrap Modalを使う

業務アプリのCSSはBootstrapがベースになっているのが多いですね。

https://getbootstrap.jp/docs/4.2/components/modal/

上記がBootstrap モーダルです。

こちらのサンプルをもとに、モーダルをコンポーネント化して、どのコンポーネントからでもモーダルを呼び出せるようにしましょう。

ポイント1 モーダルをコンポーネント化

ポイント2 モーダルを呼び出す(表示する)

呼び出し元コンポーネントの任意のメソッドから、$refを使ってモーダルコンポーネントのshow()メソッドを呼びましょう。

もしくは、呼び出し元コンポーネントの任意のメソッドから、$("モーダルのセレクタ").modal("show")でモーダルを表示することもできます。

ポイント3 モーダルから値を受け取る

モーダルから値を受け取るには、$emitを使うのが基本です。モーダルと言っても、子コンポーネント→親コンポーネントへの値の受け渡しなので、$emitを使うのが適切です。

重要

Promiseを返すようにしよう!そうすると、メソッドの中でチェーンできて非常に便利になります。

2.Vue.jsのプラグインvue-js-dialogを使う

確認ダイアログやアラートを簡単に作れるのがvue-js-dialogというプラグインです。実案件でも導入した実績があります。

確認ダイアログやアラートのために、HTMLをわざわざ書きたくない。確認ダイアログを2つ3つと連結させる必要があるときにとても便利です。

3.Vue.js+CSSで独自モーダルを実装する

スポンサーリンク

-未分類

Copyright© ノリックジオグラフィック for Webエンジニア , 2022 All Rights Reserved Powered by AFFINGER5.