缘起
近期在使用 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 。。。
网友评论