<template>
  <div class="common_dialog" :class="{'t_mask': showMask,'t_mask2':showMask2}" @click="ClickingBackground">
    <div class="dialog_content">
      <i class="iconfont iconjiufuqianbaoicon08" v-if="!close" @click.stop="closePopup"></i>
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class CommonDialog extends Vue {
  @Prop({ type: Boolean, default: false }) showMask!: boolean;
  @Prop({ type: Boolean, default: false }) showMask2!: boolean;
  @Prop({ type: Boolean, default: false }) close!: boolean;
  /**
   * name
   */
  public ClickingBackground() {
   
    this.$emit("ClickingBackground");
  }
  public closePopup() {
   
    this.$emit("closePopup");
  }
}
</script>
<style scoped lang="less">
.common_dialog {
  z-index: 99; /* 最高 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.t_mask {
  background: rgba(0, 0, 0, 0.1);
}
.t_mask2{
background-color: rgba(55, 55, 55, 0.6);
}
.dialog_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: left;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(61, 118, 249, 0.18);
  max-height: 80vh;
  .iconjiufuqianbaoicon08 {
    position: absolute;
    top: -30px;
    font-size: 28px;
    cursor: pointer;
    right: -30px;
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>
