【Vue.js】vue-js-modalでモーダルウィンドウを実装

vue-js-modalとは

vue-js-modalは、シンプルにモーダルを実装できるコンポーネントライブラリです。
モーダルをドラッグしたり、モーダルのサイズを可変する機能が備わっています。
ダイアログの機能も搭載されております。

vue-js-modalの導入方法

以下のnpm、CDNを使ってインストールします。

• npm

npm install vue-js-modal --save

• CDN

<script src="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.31/dist/index.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.31/dist/styles.css">

導入手順

1.ライブラリの取り込み

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

2.メソッドを設定

export default {
  methods: {
    show() {
      this.$modal.show("post"); //()内は任意名
    },
    hide() {
      this.$modal.hide("post"); //()内は任意名
    },
  },
}

3. テンプレートを準備

 <modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="485">
      <div class="modal-header flex">
        <h2 class="post-tll flex">Cinemaを投稿する</h2>
        <hr class="separate" />
      </div>
      <div class="modal-body">
        <div class="post-items flex">
          <div class="post-contens flex">
            <input type="text" class="post-item" placeholder="タイトル" v-model="title"/>
          </div>
          <div class="post-contens flex">
            <textarea name="text" rows="1" v-model="description" placeholder="内容"></textarea>
          </div>
          <div class="post-contens flex">
            <select v-model="genre" class="post-select" :style="{ color: genre == '' ? 'gray' : 'white' }">
              <option class="post-item" value hidden>ジャンルを選択</option>
              <option
                v-for="genre in genres"
                :value="genre.name"
                :key="genre.id"
                class="post-item"
                style="color: white;"
                >{{ genre.name }}</option>
            </select>
          </div>
          <button class="post-btn" @click.prevent="postItem">投稿</button>
          <button class="hide-btn flex" @click="hide">×</button>
        </div>
      </div>
    </modal>

プロパティ

名	必須	Type	Default	説明
name	true	[String, Number]		モーダルの名前
delay	false	Number	0	オーバーレイ表示と実際のモーダルボックス表示の間の遅延
resizable	false	Boolean	false	trueの場合、モーダルウィンドウを画面の中央に保ちながらサイズ変更できます。
adaptive	false	Boolean	false	trueの場合、モーダルボックスはウィンドウサイズに適応しようとします
draggable	false	[Boolean, String]	false	trueの場合、モーダルボックスはドラッグ可能になります。
scrollable	false	Boolean	false	heightプロパティがautoでモーダルの高さがウィンドウの高さを超える場合 - モーダルをスクロールできるようになります
reset	false	Boolean	false	モーダルを表示する前に位置とサイズをリセットします
clickToClose	false	Boolean	true	falseに設定すると、背景をクリックしてモーダルを閉じることはできません。
transition	false	String		遷移名
overlayTransition	false	String		'overlay-fade' 背景オーバーレイのトランジション名
classes	false	[String, Array]		'v--modal' 指定しない場合、実際のモーダルボックスに適用されるクラス。デフォルトのv--modalクラスが適用されます。
width	false	[String, Number]	600	ピクセルまたはパーセンテージでの幅(e.g. 50 or "50px", "50%")
height	false	[String, Number]	300	ピクセルまたはパーセンテージで表した高さ(e.g. 50 or "50px", "50%") or "auto"
minWidth	false	Number (px)	0	モーダルのサイズ変更可能な最小幅
minHeight	false	Number (px)	0	モーダルをサイズ変更できる最小の高さ
maxWidth	false	Number (px)	Infinity	モーダルの最大幅（値がウィンドウ幅より大きい場合は、ウィンドウ幅が代わりに使用されます）
maxHeight	false	Number (px)	Infinity	モーダルの最大の高さ（値がウィンドウの高さより大きい場合は、ウィンドウの高さが代わりに使用されます）
pivotX	false	Number (0 - 1.0)	0.5	水平方向の位置（％）。デフォルトは0.5です（モーダルボックスはウィンドウの中央（左から50％）になります）。
pivotY	false	Number (0 - 1.0)	0.5	垂直位置（％）、デフォルトは0.5です（モーダルボックスはウィンドウの中央（上から50％）になります）。
root	false	Vue instance	null	モーダルコンテナを取得するrootインスタンス。 このプロパティは、複数のrootインスタンスで動的モーダルを使用する場合にのみ必要です。これは珍しいことです。

まとめ

上記と設定してあげるだけで簡単にモーダルウィンドウを実装することが出来たかと思います。