最近担当したタスクでVue.jsとBuefyでモーダル画面を実装して、Buefyを使ったモーダル画面の実装方法がわかってきたのでメモします。
モーダル画面の実装は、基本的に公式ドキュメントに書かれているコードをアレンジする形でできました。
以下のようにモーダル画面を呼び出すボタンを準備します。
<b-button label="Launch image modal" type="is-primary" size="is-medium" @click="isImageModalActive = true" />
labelは画面に表示する文言んで、typeはボタンの色、sizeはボタンのサイズ、@clickでクリック時の動作を設定します。
上記のコードでは先にisImageModalActiveというブーリアンの変数を定義しておいて、ボタンがクリックされたらtrueに変わるように実装しています。
次に実際のモーダル画面を以下のように実装します。
<b-modal v-model="isImageModalActive"> <p class="image is-4by3"> <img src="/static/img/placeholder-1280x960.png"> </p> </b-modal>
b-modalタグはモーダル画面用なのでv-modelに指定されている変数がtrueの時のみ表示されます。
あとはb-modal内で必要な画面の実装を追加できます。