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

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

#vue-js-modalの導入方法
以下のnpm、CDNを使ってインストールします。

- npm

```terminal
npm install vue-js-modal --save
```

- CDN

```html
<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.ライブラリの取り込み

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


###2.メソッドを設定

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


###3. テンプレートを準備

```html
 <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インスタンスで動的モーダルを使用する場合にのみ必要です。これは珍しいことです。|

#まとめ

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