解决预览总是从第一张图片显示的问题

缘起

近期在使用 elementUI 组件库中的Image组件时，其组件会自带一个图片预览功能，仅需要通过 传入 preview-src-list （需要预览的图片url数组） 的 prop 即可实现预览。

本猿使用了此props，具体代码如下：

<div class="images_list">
  <el-image
    v-for="(src, index) in imgList"
    :key="index"
    :src="src"
    :preview-src-list="imgList"
  >
  </el-image>
</div>
……

data() {
    return {
        imgList: [
            'http://sphenginx.io/images/201042110140.jpg',
            'http://sphenginx.io/images/201542110140.jpg',
            'http://sphenginx.io/images/202042110140.jpg',
        ],
    }
}

但是发现，每次点击图片进行预览的时候， 都会从第一张图片开始预览。 这和点击当前图片即预览当前图片的期望不符。

性空

后来查看最大同性交友网站上 element的源码、 测试发现有这么几种解决方案：

• 0、preview-src-list只传入单张图片数组（当前图片数组），即：

<el-image
    v-for="(src, index) in imgList"
    :key="index"
    :src="src"
    :preview-src-list="[src]"
  >

这样可以进行当前图片的预览，但是无法进行上下图的切换浏览；

• 1、根据当前的索引动态传入 preview-src-list 参数，即：

<el-image
    v-for="(src, index) in imgList"
    :key="index"
    :src="src"
    :preview-src-list="getPrivewImages(index)"
  >

…… 

methods: {
           // 预览对应当前图片列表
            getPrivewImages(index) {
                let tempImgList = [...this.imgList];//所有图片地址
                if (index == 0) return tempImgList;
                // 调整图片顺序，把当前图片放在第一位
                let start = tempImgList.splice(index);
                let remain = tempImgList.splice(0, index);
                return start.concat(remain);//将当前图片调整成点击缩略图的那张图片
            },
}

这样也可以实现点击当前图片的时候，就会实时的展示当前图片预览，而且有点击键盘左右箭头切换图片的功能，
缺点就是如果图片很多，可能要计算多次……

他山之石

今天查看 Element 源码 El-Image , 发现其实内部有 computed 当前图片的索引，并且传递给 el-image-viewer 了 当前的 initial-index, 按理说应该是可以实现自动切换当前图片的预览的，具体情况还有待深入coding 。。。