<template>
  <el-dialog
    class="popup-big-img"
    :show-close="true"
    :close-on-click-modal="false"
    :visible.sync="isPreview"
    :modal-append-to-body="false"
    :append-to-body="true"
    :fullscreen="true"
    width="500px"
    custom-class="xl-dialog"
    center
    @click.native="close"
  >
    <img :src="src" class="big-img">
  <!-- <span slot="footer" class="xl-form">
    <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
  </span> -->
  </el-dialog>
</template>
<script>
export default {
  name: 'PopupBigImg',
  props: {
    isShow: Boolean,
    src: String
  },
  data() {
    return {
      isPreview: false
    }
  },
  watch: {
    isShow: function() {
      this.isPreview = this.isShow
    }
  },
  methods: {
    close() {
      this.$emit('close')
      this.isPreview = false
    }
  }
}
</script>
<style lang="scss" scoped>
.popup-big-img {
  ::v-deep .xl-dialog {
    background: transparent;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
  }
  .big-img {
    display: inline-block;
    max-width: 1000px;
    max-height: 1000px;
  }
}
</style>
