解决Element使用el-image总是从第一张开始的问题

  1. 问题起源:

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

     代码如下(zIndex使用是由于我把这个功能放在弹框上面,所以需要加这个属性才不会被弹框遮挡):

<el-image
   style="width: 60px; height: 60px; margin-right: 20px"
   v-for="(img, imgIndex) in detailsInfo.certificatePics"
   :key="imgIndex"
   :zIndex="3000"
   :src="img.pictureUrl"
   :preview-src-list="detailsInfo.certificatePics.map((pic) => pic.pictureUrl)"
/>

    但是发现,点击第二张、第三张图片进行预览的时候, 会从第一张图片开始预览, 并不会从当前图片开始预览。 这和点击当前图片即预览当前图片的期望不符。

  2、问题解决方案1:

    直接预览单张,不可以左右滑动轮播。

    代码如下:

<el-image
   style="width: 60px; height: 60px; margin-right: 20px"
   v-for="(img, imgIndex) in detailsInfo.certificatePics"
   :key="imgIndex"
   :zIndex="3000"
   :src="img.pictureUrl"
   :preview-src-list="[
     detailsInfo.certificatePics[imgIndex].pictureUrl,
    ]"
/>

  3、问题解决方案2:

    根据当前的索引动态传入preview-src-list参数。

    代码如下:

<el-image
   style="width: 60px; height: 60px; margin-right: 20px"
   v-for="(img, imgIndex) in detailsInfo.certificatePics"
   :key="imgIndex"
   :zIndex="3000"
   :src="img.pictureUrl"
   :preview-src-list="privewImages(imgIndex)"
/>
privewImages(index) {
      let tempImgList = this.detailsInfo.certificatePics.map(
        (item) => item.pictureUrl
      );
      // 所有图片地址
      if (index == 0) return tempImgList;
      // 调整图片顺序,把当前图片放在第一位
      let start = tempImgList.splice(index);
      let remain = tempImgList.splice(0, index);
      return start.concat(remain); // 将当前图片调整成点击缩略图的那张图片
},

    这样也可以实现点击当前图片的时候,就会实时的展示当前图片预览,而且有点击键盘左右箭头切换图片的功能。

    但是会发现,这样如果图片很多,每一次都要计算很多次的话......

    

 

 

posted @ 2022-10-20 11:54  zaijinyang  阅读(1636)  评论(0)    收藏  举报