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

<template>
  <div>
    <span>
      <template
        v-for="(item,index) in images"
        :key="'image-' + index"
      >
        <img
          v-if="images && images.length > 0"
          :src="getImageSrc(item)"
          class="img-thumbnail m-div"
          @click="showImage(item)"
        />

      </template>
    </span>
    <Modal
      ref="fullImage"
      full="true"
      :title="$t('lang.QueryPageImage.viewPicture')"
      :show-ok-button="false"
    >
      <template #default>
        <template
          v-for="(item,index) in images"
          :key="'image-' + index"
        >
          <img
            v-if="selectedImage && selectedImage.length > 0"
            :src="getImageSrc(selectedImage)"
            style="height: 100%;width: 100%"
          />
        </template>
      </template>
      <template #footer>
        <div>
          <button
            class="btn btn-success"
            type="button"
            @click="download"
          >
            {{ $t('lang.QueryPageImage.downloadPictures') }}
          </button>
        </div>
      </template>
    </Modal>
  </div>
</template>

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

export default {

  components: {
    Modal,
  },
  props: {
    'className': {
      type: Object,
      default: null,
    }, 
    'imageNames':{
      type: String,
      default: null,
    },
  },
  data: function () {
    this.Common = Common;
    return {
      images: [],
      selectedImage: '',
    };
  },
  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.$refs.fullImage.show = true;
    },
    /**
           * 获取图片地址
           * @param  {String} item 图片名称
           * @return {String}      图片URL地址
           */
    getImageSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getImageSrc(_self.selectClause, item);
      } else {
        return '';
      }
    },
    download: function () {
      window.open(this.getImageSrc(this.selectedImage));
    },
  },
};
</script>

<style scoped>
</style>