<template>
  <div v-show="visible" class="dialog-layout" >
    <div class="mark"/>
    <div :style="{ height, width, }" class="dlalog">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    height: {
      type: [String],
      default: '350px',
    },
    width: {
      type: [String],
      default: '620px',
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped>

.dialog-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.3;
  }

  .dlalog {
    width: 620px;
    height: 350px;
    position: relative;
  }
}

</style>
