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

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

「vue-js-modal」とは

Vue.jsで簡単にモーダルウィンドウを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回はCDNで簡易的に導入します。

See the Pen GRKvKME by YusukeIkeda (@YusukeIkeda) on CodePen.

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

<!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プラグインの取り込み

modal.js


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

メソッドの用意

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

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"を付与します。
ページを表示させた後一定時間後に表示させたい場合などに便利です。

オプション指定例

  <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

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