#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プラグインの取り込み
Vue.use(window["vue-js-modal"].default);
##メソッドの用意
modalテンプレートを呼び出すためのメソッドを用意します。
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