chat/_src/components/popup/imgPreview/index.vue

<template>
  <transition name="msgbox-fade">
    <div class="preview-mask pub-scroll-box" v-if="visible" @click="visible = false">
      <i class="el-icon-close" @click.stop="visible = false"></i>
      <img class="img" :src="imgUrl" alt="" @click.stop="visible = false">
    </div>
  </transition>
</template>

<script>

export default {
  name: 'imgPreview'
}
</script>

<style lang="scss" scoped>
.preview-mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: .8);
  text-align: center;
  overflow: auto;
  &::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}
.img{
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.el-icon-close{
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000;
  color: #ffffff;
}
</style>