Element UI 中实现小图片组件展示缩略图,同时大图预览展示原图

(抱歉,想不到更好的标题了)

我们的某个 Vue 2 项目用到了 Element UI,而且很多地方需要展示图片列表,还需要点击图片就能实现大图预览。

Element UI 中提供了 图片组件,而且自带了一个预览功能。但是有一些问题:

  • 直接把所有的原图塞到图片组件,浪费客户端和我们 OSS 的流量。
  • 尽管可以给每个图片组件指定大图预览列表(preview-src-list),但是只有图片组件的 src 跟大图预览列表中任意一项完全相等,才会展示出一组图片中正确的一张,而不是永远展示第一张。
  • 不能靠只给预览列表传一张图的方法解决,因为人家希望在大图预览中能够切换图片。

而解决方案很简单,就是给每个图片组件实时单独生成一个大图预览列表。

<template>
  <div>
    <div v-for="(src, i) in imageList">
      <el-image
        style="width: 100px; height: 100px"
        :src="src"
        :preview-src-list="getPreviewList(i)">
      </div>
   </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class extends Vue {
  // 缩略图列表
  imageList = ["1-small.jpg", "2-small.jpg", "3-small.jpg"]
  // 大图列表
  previewList = ["1.jpg", "2.jpg", "3.jpg"]

  /**
   * 获取大图列表
   */
  getPreviewList(index: number) {
    const list: string[] = []
    let i = index
    while (i <= this.previewList.length - 1) {
      list.push(this.previewList[i])
      i++
    }
    i = 0
    while (i < index) {
      list.push(this.previewList[i])
      i++
    }
    return list
  }
}
</script>