Vue.js（Nuxt.js）でBulmaのModalを使う方法

Vue.js/Nuxt.js

2021.01.13

今回はVue.js・Nuxt.jsでBulmaのModalを使う方法を書きます。

導入方法
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>