Element框架提供了一個(gè)el-image-viewer組件實(shí)現(xiàn)預(yù)覽大圖的功能，且可以進(jìn)行圖片的切換关拒，其可以很好的代替Image組件的previewSrcList。
部分源碼為：
export default {
name: 'elImageViewer',
props: {
urlList: {
type: Array,
default: () => []
},
zIndex: {
type: Number,
default: 2000
},
onSwitch: {
type: Function,
default: () => {}
},
onClose: {
type: Function,
default: () => {}
}
},
屬性較為簡(jiǎn)單惠遏，主要使用的是 urlList 和 onClose蓬坡，前者是圖片的列表，后者則是關(guān)閉該預(yù)覽組件片迅。
由于對(duì)圖片的大圖預(yù)覽都是從縮略圖點(diǎn)擊而觸發(fā)残邀，由于 urlList 在初始化后，大圖便從數(shù)組第一張圖進(jìn)行展示，而普遍的要求是點(diǎn)擊第幾張圖片便從此圖開始預(yù)覽芥挣。
所以在點(diǎn)擊縮略圖的時(shí)候需要對(duì) urlList 進(jìn)行順序的處理驱闷。
代碼如下：
<!--縮略圖-->
<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"
/>
// 點(diǎn)擊縮略圖的方法
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);
}
