今回はVue.js・Nuxt.jsでBulmaのModalを使う方法を書きます。
導入方法
BulmaをNuxt.jsに導入する方法は下の記事に載せてあります。

Nuxt.jsにBulmaを導入する方法
Nuxt.jsで作っているプロジェクトにフレームワークのBulmaを導入することがあったのでメモ今回はCDNではなくnpmでインストールして導入します。パッケージをインストールBulmaのインストールnpm install bul...
Modalを実装
ModalのHTML
<button @click="on">表示</button> <div class="modal" v-bind:class="modal_class"> <div class="modal-background" @click="on"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Modal title</p> <button class="delete" aria-label="close" @click="on"></button> </header> <section class="modal-card-body"> <!-- Content ... --> </section> <footer class="modal-card-foot"> <button class="button is-success">Save changes</button> <button class="button" @click="on">Cancel</button> </footer> </div>
</div>
JavaScript
export default { data(){ return { modal_class:"" } }, methods:{ on:function(){ if (this.modal_class == "is-active"){ this.modal_class = "" }else{ this.modal_class = "is-active" } } } }
HTMLはBulma公式のドキュメントに載っていたコードをそのまま使用しています。
BulmaのModalはclassにis-activeを入れると表示、外すと非表示になるのでbuttonをクリックしたときにclassの値を書き換える処理を実装しています。
参考サイト

Modal
Advanced multi-part components with lots of possibilities
<button @click="on">表示</button> <div class="modal" v-bind:class="modal_class"> <div class="modal-background" @click="on"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Modal title</p> <button class="delete" aria-label="close" @click="on"></button> </header> <section class="modal-card-body"> <!-- Content ... --> </section> <footer class="modal-card-foot"> <button class="button is-success">Save changes</button> <button class="button" @click="on">Cancel</button> </footer> </div>
ビスケットを送る0
コメント