vue实现dialog对话框

一、为实现该dialog的复用，我这里把它写成一个组件（Vue中定义的组件）

<template>
  <div id="dialog">
    <div class="border">
      <div @click="closeDialog" class="closeImg"></div>
      <span class="message">这是一段信息</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){
      return {}
    },
    methods:{
      closeDialog(){
         //给父组件传参
         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>

二、注册并使用该组件

<template>
  <div id="exam">
    <div style="cursor: pointer;" @click="vm.showDialog=true">
      点我打开Dialog
    </div>
    //@closeDialog用来接收子组件传过来的参数
     <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>

附张效果图：

以上便实现了dialog对话框，子组件可以暴露很多属性出来，在父组件中进行配置，这里我只是暴露一个关闭方法，其他的类同。