Element框架提供了一个el-image-viewer组件实现预览大图的功能，且可以进行图片的切换，其可以很好的代替Image组件的previewSrcList。
部分源码为：
export default {
name: 'elImageViewer',
props: {
urlList: {
type: Array,
default: () => []
},
zIndex: {
type: Number,
default: 2000
},
onSwitch: {
type: Function,
default: () => {}
},
onClose: {
type: Function,
default: () => {}
}
},
属性较为简单，主要使用的是 urlList 和 onClose，前者是图片的列表，后者则是关闭该预览组件。
由于对图片的大图预览都是从缩略图点击而触发，由于 urlList 在初始化后，大图便从数组第一张图进行展示，而普遍的要求是点击第几张图片便从此图开始预览。
所以在点击缩略图的时候需要对 urlList 进行顺序的处理。
代码如下：
<!--缩略图-->
<el-image
@click="handleImgClick(index)"
v-for="(item, index) in imgList"
:src="item"
/>
<!--大图-->
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="viewerImgList"
/>
// 点击缩略图的方法
handleImgClick(index) {
this.showViewer = true;
let tempImgList = [...this.imgList];
let temp = [];
for (let i = 0; i < index; i++) {
temp.push(tempImgList.shift());
}
this.viewerImgList = tempImgList.concat(temp);
}
