はじめに

フロントエンド開発をする際にmodalは非常に便利で、よく使うと思います。 vue.jsでは僕は2つの実装方法を見つけました。

1. transitionを使った実装
2. vue-js-modalを使った実装

前者は、パッケージを必要とせず、後者はnpm installして利用します

どちらがいいかは、正直好みによるかなと言う印象です。 今回は個人的に簡単だと思うvue-js-modalを使ってみます

準備

vue-cliを使ってプロジェクトを作成しました。 node.jsやvue-cliのインストールに関しては割愛します。 （おそらく、今回に関してはバージョンの依存関係とかはあまりないと思います）

node: 14.0.0
vue: 2.6.11 (Vue3も近いうちに試さないとなぁ)

こんな感じの環境で

vue create modal-sample
(ポチポチenter)

でプロジェクトを作成します。

まずは楽をするために、App.vueでほとんど完結させます。 それと、vue-js-mdoalを以下のコマンドでインストールします。

yarn add vue-js-modal

npmを使っている方は適宜、npm installに置き換えてください。

実装

まずmain.jsで

import VModal from 'vue-js-modal'

Vue.use(VModal)

を追記します。 次にApp.vueを編集します

<template>
  <div id="app">
    <button v-on:click="show" class="button">モーダルを出す</button>

    <modal name="modal-test" :draggable="true" :resizable="true" width="85%" height="70%">
      <h1>モーダルだよー</h1>
    </modal>
  </div>
</template>

<script>
export default {
  methods: {
    show() {
      this.$modal.show('modal-test');
    },
    hide() {
      this.$modal.hide('modal-test');
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

とても簡単にモーダルを追加することができましたね！

最初は簡単にするためにApp.vueに全て書きましたが、次はvue.jsっぽい感じでコンポーネントに分けてみましょう！

まず、App.vueをすっきりさせましょう。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

次にHome.vueを編集していきます

<template>
  <div class="home">
    <button v-on:click="show" class="button">モーダルを出す</button>

    <Modal />
  </div>
</template>

<script>
// @ is an alias to /src
import Modal from '@/components/Modal.vue'

export default {
  name: 'Home',
  methods: {
    show() {
      this.$modal.show('modal-test');
    },
    hide() {
      this.$modal.hide('modal-test');
    }
  },
  components: {
    Modal
  }
}
</script>

最後にModal.vueをcomponentsディレクトリに作成して編集します

<template>
  <modal name="modal-test" :draggable="true" :resizable="true" width="85%" height="70%">
    <h1>モーダルだよー</h1>
  </modal>
</template>

さて、これでコンポーネントに分割できて再利用しやすい状態になりました。

最後におまけ。

今のままではmodalで静的な表示しかできないので動的なコンテンツ表示ができるように編集します。

Home.vueを編集してModalに変数を渡せるようにします

<template>
  <div class="home">
    <button v-on:click="show" class="button">モーダルを出す</button>

    <Modal :message="message"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Modal from '@/components/Modal.vue'

export default {
  name: 'Home',
  data() {
    return {
      message: '好きです！！！'
    }
  },
  methods: {
    show() {
      this.$modal.show('modal-test');
    },
    hide() {
      this.$modal.hide('modal-test');
    }
  },
  components: {
    Modal
  }
}
</script>

次にModal.vueを編集します

<template>
  <modal name="modal-test" :draggable="true" :resizable="true" width="85%" height="70%">
    <h1>{{ message }}</h1>
  </modal>
</template>


<script>
export default {
  props: ['message']
}
</script>

これで、動的に表示内容を帰ることができるようになり、素敵なメッセージが見れるようになり再利用性が上がりましたね！

ちなみに、厳密には

hide() {
      this.$modal.hide('modal-test');
    }

はなくても、暗いところクリックすればモーダルは閉じます。 しかし、暗いところクリック以外のイベントでモーダルを閉じたいこともあると思います（例えば、モーダル内のボタンを押したらモーダルが閉じるとか）。 そんな時は、ボタンのイベントにhideを登録しておけばOKです。

終わり

modalをplainなコードで実装しようと思うと、transitionとかを使って実装することになると思いますが、vue-js-modalを使うと簡単に実装することができます。

modalは便利だし、きちんと使えばUX向上に利用できる素敵な機能なので、このように簡単に利用できるのは嬉しいですね！