pc-component-v5/packages/image-preview/src/ImagePreview.vue

/** 图片预览 */

<template>
  <Modal
    ref="modal"
    :large="true"
  >
    <div class="modal-img-box">
      <img
        :src="src"
        class="m-img"
      />
    </div>
    <template #header>
      <slot>
        {{ $t('lang.imagePreview.imagePreview') }}
      </slot>
    </template>
  </Modal>
</template>


<script>
var Common = require('../../common/Common.js')
var Modal = require('../../modal/src/Modal.vue').default

export default {
  name: 'ImagePreview',

  components: {
    Modal,
  },
    
  props: {
    'className':{
      type: String,
    },
    'imageName':{
      type: String,
    },
  }, 

  data: function () {
    return {
      'src': null,
    }
  },

  methods: {
    /**
         * 预览图片
         */
    preview: function (className, imageName) {
      if (imageName != null && imageName != '') {
        this.$refs.modal.show = true
        this.src = Common.getImageSrc(className, imageName)
      }
    },

    /**
         * 预览图片
         */
    previewImage: function (imageName) {
      this.$refs.modal.show = true
      this.src = imageName
    },
  },
}
</script>


<style scoped>
.modal-img-box {
    width: 100%;
    text-align: center;
    overflow: auto;
}

.m-img {
    width: 60%;
}
</style>