Vue.js でモーダルコンポーネントを作る

概要

モーダルコンポーネントを実装してみました。 特に難しい箇所はなく、ボタンを押すたびにモーダルを表示・非表示したりするだけでした。

実装

実装です。

<html>
   <head>
      <script src='https://unpkg.com/vue/dist/vue.js'></script>
      <style>
         <!--
            .modal-mask {
              background-color: rgba(0, 0, 0, .5);
              /* table タグを使わずに同様のスタイルを利用することが出来るようになります。 */
              display: table;
              height: 100%;
              left: 0;
              /*  ページをスクロールした場合でも、同じ位置に表示されます */
              position: fixed;
              top: 0;
              width: 100%;
              /* 重なりの順番を指定します。数値が大きいものほど手前に配置されます */
              z-index: 9998;
            }

           .modal-wrapper {
              display: table-cell;
              /* 縦方向の位置を中央にします */
              vertical-align: middle;
            }

           .modal-container {
             background-color: #fff;
             margin: 0px auto;
             width: 300px;
            }
         -->
      </style>
   </head>
   <body>
      <script type='text/x-template' id='modal-template'>
         <div class='modal-mask'>
           <div class='modal-wrapper'>
             <div class='modal-container'>
                  <p>ボク、運命の人です</p>
                  <!-- 「$emit」は、現在のインスタンス上でイベントを発行します。 -->
                 <button @click="$emit('close')">OK</button>
             </div>
           </div>
         </div>
    </script>

     <div id='app'>
         <button @click='showModal = true'>Show Modal</button>
         <!-- 「@」は、v-on の省略記法でイベントリスナをアタッチします。  -->
         <modal v-if='showModal' @close='showModal = false'>
         </modal>
      </div>

     <script type='text/javascript'>
        const modal = Vue.extend({
          template: '#modal-template'
          })

        new Vue({
           el: '#app',
           data: {
             showModal: false
           },
           components: {
             'modal': modal
           }
         })
      </script>
   </body>
</html>

参考リンク