美文网首页Vue
解决预览总是从第一张图片显示的问题

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

作者: sphenginx | 来源:发表于2020-09-24 14:23 被阅读0次

    缘起

    近期在使用 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 。。。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/uyizyktx.html