paper-library-font/src/components/ImageListPreview.vue

<template>
  <div class="image-list-preview">
    <el-dialog
      :visible.sync="modalIsShow"
      title="图片预览"
      top="10vh"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="visibleChange"
    >
      <div class="image-preview-list">
        <div
          v-for="(imgUrl, index) in imageList"
          :key="imgUrl"
          :class="[
            'image-preview-item',
            { 'is-active': index === curImageIndex }
          ]"
          title="点击查看大图"
          @click="toPreview(index)"
        >
          <img :src="imgUrl" :alt="imgUrl" />
        </div>
      </div>
    </el-dialog>

    <!-- simple-image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
  </div>
</template>

<script>
import SimpleImagePreview from "@/components/SimpleImagePreview";

export default {
  name: "image-list-preview",
  components: { SimpleImagePreview },
  props: {
    imageList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      curImage: {},
      curImageIndex: null
    };
  },
  methods: {
    visibleChange() {
      this.curImage = {};
      this.curImageIndex = null;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toPreview(index) {
      this.curImageIndex = index;
      this.selectImage(index);
      this.$refs.SimpleImagePreview.open();
    },
    selectImage(index) {
      this.curImage = { url: this.imageList[index] };
    },
    toPrevImage() {
      if (this.curImageIndex === 0) {
        this.curImageIndex = this.imageList.length - 1;
      } else {
        this.curImageIndex--;
      }

      this.selectImage(this.curImageIndex);
    },
    toNextImage() {
      if (this.curImageIndex === this.imageList.length - 1) {
        this.curImageIndex = 0;
      } else {
        this.curImageIndex++;
      }

      this.selectImage(this.curImageIndex);
    }
  }
};
</script>