はじめに

vue.jsでモーダルを実装するライブラリを探していたところ「vue-js-modal」を見つけました。

2019年4月23日時点でStarの数が「2334」です。

かなり人気のライブラリになります!

 

環境

vue.js: 2.6.10
vue-js-modal:1.3.28

 

インストール

インストールにはnpm,CDNのどちらかを使用します。

npm

npm install vue-js-modal --save

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

 

下記のGithubからダウンロードすることもできます。

https://github.com/euvl/vue-js-modal

 

導入手順

シンプルな使い方は以下になります。

1. vue-js-modalプラグインの取り込み

webpack等

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

WEBページ

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

2. methodsを用意する

テンプレート<modal> を呼び出す為のmethodsを準備します。

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

3. テンプレートを用意する

<modal>をHTMLに設置します。
nameパラメーターでモーダルの振り分けを行います。

<div id="app">
  <button v-on:click="show">show!</button>
  <modal name="hello-world">
    <p>hello, world!</p>
    <button v-on:click="hide">hide</button>  
 </modal>
</div>

 

サンプル

See the Pen Vue.js modal by カバの樹 (@kabanoki) on CodePen.dark

 

>>サンプル集はこちら

 

プロパティ

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

 

<modal name="example"
       :width="300"
       :height="300">
</modal>

 

 

イベント

 

説明
before-open モーダルはまだ表示されていないがDOMに追加されている間に発行する
opened モーダルが可視になった後、または遷移を開始した後に起動します
before-close モーダルが閉じられる前に起動します。
event.stop()を呼び出しているイベントリスナーから停止することができます(例:テキストエディタを作成していて、閉じるのを止めて、テキストが無効な場合はユーザーに間違いを訂正してもらいたいです)
closed モーダルが破壊される直前に起動する

 

 
<modal name="example"
       @before-open="beforeOpen"
       @before-close="beforeClose">
</modal>

 

サンプル集

プロパティの設定等で色々やれるので、そのご紹介をします。

リサイズ

プロパティのresizableを設定してやります。

ソース

<modal name="hello-world" :resizable="true"></modal>

サンプル

See the Pen Vue.js modal resize by カバの樹 (@kabanoki) on CodePen.dark

 


ドラッグブル

プロパティのdraggableを設定してやります。

ソース

<modal name="hello-world" :draggable="true"></modal>

サンプル

See the Pen Vue.js modal draggable by カバの樹 (@kabanoki) on CodePen.dark

 


ダイアログ

このダイアログを使えばボタン付きのモーダルを使用できます。

Script

Vue.useの呼び出し方がnpmCDNで違うので注意です。

//npmの場合
Vue.use(VModal, { dialog: true })

//CDNの場合
Vue.use(window["vue-js-modal"].default, { dialog: true });

var app = new Vue({
  el: '#app',
  methods: {
    show : function() {
      this.$modal.show('dialog', {
        title: 'アラート!',
        text: 'ダイアログメッセージ',
        buttons: [
          {
            title: '処理1',
            handler: function(){ alert('Woot!') }
          },
          {
            title: '閉じる'
          }
        ]
      });
    },
    hide : function () {
      this.$modal.hide('hello-world');
    }
  }
});

HTML

<div id="app">
  <button v-on:click="show">show!</button>
  <v-dialog/>
</div>

サンプル

See the Pen Vue.js modal Dialog by カバの樹 (@kabanoki) on CodePen.dark

まとめ

CSSは自作する必要がありますが、機能としてはかなり細かく設定することが可能です。

なによりGithubでも人気なので、これからどんどん開発が進んでいくと思います。

ぜひ試してください。

今日はこの辺でー

 

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください