Vue.js(Nuxt.js)でBulmaのModalを使う方法

コード Vue.js/Nuxt.js

今回は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>

コメント

タイトルとURLをコピーしました