<template>
  <el-dialog
    title="预览图片"
    :visible.sync="imgDialogVisible"
    fullscreen
    :before-close="handleClose"
    :modal='false'
    top="8vh"
  >
    <el-carousel :loop='false' height="800px">
      <el-carousel-item
        v-for="item in imgArrSrc"
        :key="item.id"
      >
        <div class="imgDialog">
          <img :src="item.url" />
        </div>
      </el-carousel-item>
    </el-carousel>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="imgDialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    imgArrSrc: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      imgDialogVisible: false
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    open() {
      this.imgDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.imgDialog {
    display: flex;
    justify-content: center;
    height: 100%;
}
img{
    height: 100%;
}
</style>
