<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    append-to-body
    custom-class="dialog-boxed"
    :width="width"
  >

    <div class="dialog-slot">
      <div class="closeClick">
        <div>{{ title }}</div>
        <i class="el-icon-close" @click="Close"></i>
      </div>
      <slot></slot>
    </div>

  </el-dialog>
 
  
</template>
<script>
export default {
   name:"dialogTitle",
   data() {
      return {
        dialogVisible:false
      }
   },
   props:{
    title:{
      type:String,
      default:"title",
    },
    width:{
      type:String,
      default:'50%'
    }
   },
   methods:{
    open() {
      this.dialogVisible = true;
    },
    Close() {
      this.dialogVisible = false;
      this.$emit('myForm')
    },
    tianbaoclose(){
      this.dialogVisible = false;

    }
   },
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";

::v-deep .el-dialog__body{
  margin-bottom:10px;
}
.dialog-slot {
  padding: 0;
  .closeClick {
    position: absolute;
    top: vh(0);
    right: vw(0);
    padding: vw(10) vw(20);
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0px 1px 0px 0px #dbe0e8;
    cursor: pointer;
    i {
      font-family: Source Han Bolde CN;
      font-weight: bold;
      text-align: center;
      padding: vh(5) 0 0 0;
    }
    div {
      font-size: vw(20);
      font-family: Source Han Bolde CN;
      font-weight: bold;
      color: #292f38;
    }
  }
}
</style>