element-ui 多張圖片展示以及點擊圖片預覽功能實現

頁面展示代碼：

<el-image v-for="(item, index) of photoLists" :key="index" :src="item.sfUrl" :preview-src-list="getPreviewImgList(index)"></el-image>

 

實現代碼：

export default {
  data() {
    return {
　　　　　　photoLists: []， // 圖片數據
　　　　　　srcList: [], // 圖片大圖預覽數據 
　　　　}
　　}
}

// viewUploadImages接口獲取圖片數據

viewUploadImages(params).then((response) => {
  this.photoLists = response.data
  for(let item of this.uploadImages){
    this.srcList.push(item.sfUrl)
  }
})

// 大圖預覽，實現點擊當前圖片顯示當前圖片大圖，可以隨機切換到其他圖片進行展示
getPreviewImgList:function(index) {
  let arr = []
  let i = 0;
  for(i;i < this.srcList.length;i++){
    arr.push(this.srcList[i+index])
    if(i+index >= this.srcList.length-1){
      index = 0-(i+1);
    }
  }
  return arr;
},