<template>
  <div class="dialog-wrap" v-if="show">
      <div class="dialog">
        <div class="dialog-title">{{title}}
          <div class="close" @click="close"><img src="../assets/images/close.png" alt=""></div>
        </div>
        <div class="content">
          <slot />
        </div>
      </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
       show: false
     }
   },
   props: {
     title: {
       type: String,
       defoult: '提示'
     },
     visible: {
       type: Boolean,
       type: false
     }
   },
   methods: {
     close() {
       this.show = false
       this.$emit('close')
     }
   },
   created(){
     this.show = this.visible
   },
   watch: {
     visible() {
       this.show = this.visible
     }
   }
 }
</script>

<style scoped lang="scss">
  .dialog-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 100;
    .dialog {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 6rem;
      height: 6rem;
      background-color: #fff;
      border-radius: 0.2rem;
      .dialog-title {
        padding: 0.32rem 0.32rem 0.76rem 0.32rem;
        text-align: center;
        font-size: 0.36rem;
        color: #333333;
        font-weight: bold;
        line-height: 0.36rem;
        .close{
          float: right;
          margin: 0;
          height: 0.36rem;
          width: 0.36rem;
          img {
            height: 0.36rem;
            width: 0.36rem;
          }
        }
      }
    }
  }
</style>
