Vue.jsで簡単にモーダルが実装できる「vue-js-modal」

vue-js-modalとは

vue-js-modalは、シンプルにモーダルを実装できるコンポーネントライブラリです。

モーダルをドラッグしたり、モーダルのサイズを可変する機能が備わっています。

ダイアログの機能も搭載されております。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue-js-modal --save

<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">

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

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、CDNを使ってVue.jsでシンプルなモーダルを実装します。

step.1 ライブラリの呼び出し

ES6等で実装する場合

import VModal from 'vue-js-modal'

UMDで実装する場合

const VModal = window["vue-js-modal"].default

step.2 Vueインスタンスを設定

上記で取得したVModalを Vue.use に取り込みます。

モーダルの起動をするめにmethodsにshowとhideのメソッドを準備します。

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

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

<modal>を設置します。
name プロパティで複数のモーダルの振り分けを行います。

<div id="app">
  <button v-on:click="show" class="button">show!</button>
  <modal name="hello-world" :draggable="true" :resizable="true">
    <div class="modal-header">
      <h2>Modal title</h2>
    </div>
    <div class="modal-body">
      <p>you're reading this text in a modal!</p>
      <button v-on:click="hide">閉じる</button>
    </div>  
  </modal>
</div>

step.4 スタイルを適用

vue-js-modalは基本のスタイルが用意されていないので、サンプル用に以下を使用します。

.modal-header, .modal-body {
  padding: 5px 25px;
}
.modal-header {
  border-bottom: 1px solid #ddd;
}

サンプル

プロパティ

例

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

イベント

例

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

サンプル集

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

リサイズ

モーダルをリサイズ可能にするには、 resizable プロパティを設定します。

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

サンプル

ドラッグブル

モーダルをドラッグ可能にするには、 draggable プロパティを設定します。

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

サンプル

ダイアログ

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

Script

new Vue({
  el: '#app',
  methods: {
    show : function() {
      this.$modal.show('dialog', {
        title: 'アラート!',
        text: 'ダイアログメッセージ',
        buttons: [
          {
            title: '処理１',
            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></v-dialog>
</div>

サンプル

さいごに

シンプルにモーダルを実装できるコンポーネントライブラリでした。

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

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

ぜひ試してください。

今日はこの辺でー