vueによるダイアログの実装

一つは、このダイアログの再利用を実装するために、ここではコンポーネントとして書いています（Vueで定義されています）。

<template>
  <div id="dialog">
    <div class="border">
      <div @click="closeDialog" class="closeImg"></div>
      <span class="message">This is a message</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){
      return {}
    },
    methods:{
      closeDialog(){
         // Passing parameters to the parent component
         this.$emit('closeDialog',false)
      }
    }
  }
</script>

<style scoped>
  #dialog{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
  }
  .message{
    text-align: center;
    position: absolute;
    top: 50%;
  }
  .closeImg{
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
    background-image: url(... /... /assets/close.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .border{
    text-align: center;
    background-color: white;
    border-radius: 20px;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>

II. コンポーネントの登録と使用

<template>
  <div id="exam">
    <div style="cursor: pointer;" @click="vm.showDialog=true">
      Tap me to open Dialog
    </div>
    //@closeDialog is used to receive the parameters passed by the child component
     <Dialog
      @closeDialog="close"
      v-if="vm.showDialog"></Dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Dialog from '... /... /public/Dialog'
  Vue.component('Dialog',Dialog)
    export default {
      name: "",
      data(){
          return {
            vm: {
              showDialog: false,
            }
          }
      },
      methods:{
        close(){
          this.vm.showDialog = false;
        }
      }
    }
</script>

<style scoped>
  #exam{
    width: 100%;
    height: 100%;
  }
</style>

エフェクトの画像付き。

上記はダイアログの実装ですが、子コンポーネントは親コンポーネントで設定する多くのプロパティを公開することができます。ここではcloseメソッドだけを公開し、あとは同じです。