pc-component-v5/packages/info/src/QueryPageImage.vue

<template>
  <div>
    <span>
      <template v-for="(item, index) in images" :key="'image-' + index">
        <AuthImage
          :auth-src="getImageSrc(item)"
          style="width: 40px; cursor: pointer"
          @click="previewImage(item, index)"
        />
        <ImagePreview ref="imagePreview">
          <template #default> 图片查看器 </template>
        </ImagePreview>
      </template>
    </span>
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import AuthImage from '../../image/src/AuthImage.vue';
import ImagePreview from '../../image-preview/src/ImagePreview.vue';

export default {
  components: {
    AuthImage,
    ImagePreview,
  },
  props: {
    className: {
      type: Object,
      default: null,
    },
    imageNames: {
      type: String,
      default: null,
    },
  },
  data: function () {
    this.Common = Common;
    return {
      images: [],
      selectedImage: '',
      modal: false,
    };
  },
  watch: {
    /**
     * fieldValue发生改变
     */
    imageNames: function (value) {
      if (value == undefined || value.length == 0) {
        this.images = [];
      } else {
        this.images = value.split(',');
      }
    },
  },
  mounted: function () {
    if (this.imageNames == undefined || this.imageNames.length == 0) {
      this.images = [];
    } else {
      this.images = this.imageNames.split(',');
    }
  },

  methods: {
    showImage: function (item) {
      this.selectedImage = item;
      this.modal = true;
    },
    /**
     * 获取图片地址
     * @param  {String} item 图片名称
     * @return {String}      图片URL地址
     */
    getImageSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getImageSrc(_self.className, item);
      } else {
        return '';
      }
    },
    previewImage: function (image, index) {
      const src = this.getImageSrc(image);
      this.$refs.imagePreview[index].preview(src);
    },
    download: function () {
      window.open(this.getImageSrc(this.selectedImage));
    },
  },
};
</script>

<style scoped>
</style>