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

/** 图片预览 */

<template>
  <Modal
    v-model:show="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>
import Common from '../../common/Common.js';
import Modal from '../../modal/src/Modal.vue';

export default {
  name: 'ImagePreview',

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

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

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

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


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

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