Vue.jsによるモーダルウィンドウのサンプル (スタンダードなUIからVueに慣れる③)


#Vue.jsでモーダルウィンドウを実装してみた

[Vue.jsによるタブ切り替えの実装](https://qiita.com/yske/items/7f1305ed904963d93729)、[Vue.jsによるカルーセルスライダーの実装](https://qiita.com/yske/items/7bc0df9bf0a82d222422)に引継ぎスタンダードなUIに
モーダルウィンドウがありますが、それもVue.jsでは簡単に実装する事ができます。
今回は「vue-js-modal」を使ってモーダルウィンドウを実装してみます。

##「vue-js-modal」とは
Vue.jsで簡単にモーダルウィンドウを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回は[CDN](https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.28/dist/index.min.js)で簡易的に導入します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="YusukeIkeda" data-slug-hash="GRKvKME" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRKvKME">
  <span>See the Pen <a href="https://codepen.io/YusukeIkeda/pen/GRKvKME/">
  GRKvKME</a> by YusukeIkeda (<a href="https://codepen.io/YusukeIkeda">@YusukeIkeda</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

npmで導入する場合は下記コマンドを実行

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

CDNで導入する場合は下記JSを読み込む

```
https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.28/dist/index.min.js
```

#HTML
```html:HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-js-modal</title>
<style>
.modal-area-inner{
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}
.modal-area-inner .hide{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
  <button class="button" v-on:click="show">モーダルウィンドウを表示</button>
  <modal name="modal-area">
    <div class="modal-area-inner">
    <p>モーダルウィンドウが表示されました。</p>
    <span class="hide" v-on:click="hide">閉じる[close]</span>
    </div>
 </modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.28/dist/index.min.js"></script>
<script src="modal.js"></script>
</body>
</html>
```

#JavaScript

##vue-js-modalプラグインの取り込み
```js:modal.js

Vue.use(window["vue-js-modal"].default);
```


##メソッドの用意

modalテンプレートを呼び出すためのメソッドを用意します。


```js:modal.js

var app = new Vue({
  el: '#app',
  methods: {
    show: function() {
      this.$modal.show('modal-area');
    },
    hide: function() {
      this.$modal.hide('modal-area');
    },
  }
});

```

#よく使いそうなオプション

##ウィンドウの幅指定
モーダルウィンドウの幅を指定したい場合は```:width="300"```を付与するだけでＯＫです。
デフォルトの幅600になっています。

##モーダルウィンドウのサイズを可変にする
スライドの速度を指定する場合はは``` :resizable="true"```を指定します。
デフォルト値は```false```です。

##モーダルウィンドウを遅らせて表示させる。

モーダルウィンドウを遅延させて表示させたい場合は```:delay="1000"```を付与します。
ページを表示させた後一定時間後に表示させたい場合などに便利です。


```html:オプション指定例
  <modal name="modal-area" :width="300" :height="300" :resizable="true" :delay="5000">
    <div class="modal-area-inner">
    <p>モーダルウィンドウが表示されました。</p>
    <span class="hide" v-on:click="hide">閉じる[close]</span>
    </div>
 </modal>
```

上記以外にも以下の表のように様々なオプションが用意されています。


| name | 必須 | 型 | 初期値 |
|:-----------|:------------|:-------------|:-------------|
| name |  true | [String, Number] |  |
| delay | false | Number | 0 |
| resizable | false | Boolean | false |
| adaptive | false | Boolean | false |
| draggable | false | [Boolean, String] | false |
| scrollable | false | Boolean | false |
| reset | false | Boolean | false |
| clickToClose | false | Boolean | true |
| transition | false | String |  |
| overlayTransition | false | String |'overlay-fade' |
| classes | false | [String, Array] | 'v--modal' |
| width | false | [String, Number] | 600 |
| height | false | [String, Number] | 300 |
| 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 |
| pivotY | false | Number (0 - 1.0) | 0.5 |
| root | false | Vue instance | null |


 


#まとめ
Vue.jsではモーダルウィンドウもプラグインを使うことで簡単に実装する事ができました。
標準なUIについてはほぼプラグインが用意されているので、Vue.jsそのもの仕様を理解してオリジナルで作成してみようと思います。
・参考 https://www.npmjs.com/package/vue-js-modal