vue-js-modalで超簡単にモーダルを実装する（laravel×vue）

今回は vue-js-modalで超簡単にモーダルを表示させる方法について紹介したいと思います。

ではさっそくいってみましょう💨

vue-js-modalをインストール

まずはライブラリをインストールします

npm install vue-js-modal --save

僕の場合はバージョン1.3.xじゃないとインストールできなかったので、 npm install vue-js-modal@1.3 --save という指定をしました。

どんなバージョンがあるかはこちらで確認できます

vue-js-modalインポートする

app.jsでインポートします

import VModal from 'vue-js-modal'
 
Vue.use(VModal)

超簡素なモーダルを作成する

超簡素なモーダルを作成してみます

HelloWorldModal.vueを作成します。
modalの name に適切な名前を付与してあげましょう

<template>
<modal name="hello-world">
  hello, world!
</modal>

</template>
<script>
export default {
  created() {
  },
  computed: {
  },
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang='sass' scoped>

</style>

app.jsで作成したモーダルを読み込みます

// Modals
Vue.component('hello-world-modal', require('./components/modals/HelloWorldModal.vue').default);

モーダルを呼び出す

呼び出したいVueの中で、まずモーダルを設置しておく

<hello-world-modal/>

記述しているHTMLの一番下の方にあれば良いと思います。

そして、モーダルを表示します。
モーダルを表示する際はモーダル作成時につけた名前で表示・非表示を指定します。

    show () {
      this.$modal.show('hello-world');
    },
    hide () {
      this.$modal.hide('hello-world');
    }

これで、モーダルを表示したときはこんな画面になりました。

これだけでモーダルができちゃいました！すごい、簡単でした。

どんなオプションが付けられるか見てみる

公式ドキュメントによると、 モーダルをドラッグできたり、スクロールできるようにしたり、幅(width)・高さ(height)を指定したりできるみたいです。

ちなみにwidthやheightを指定するしたときに、 :adaptive="true" も一緒に指定しないと設定が効きませんでしたのでお気をつけください。

というわけで、今回は vue-js-modalを使ってみました。めちゃくちゃかんたんにモーダルが実装できるので、便利なライブラリですね。