Element el-image-viewer根据点击图片依次预览

代码

 <div class="file-item" v-for="(item,index) in ruleForm.workerQualificatLicenseImage" :key="index"><el-image@click="handleImgClick(index)":src="item.url"height="90" width="130"/><el-image-viewerv-if="showViewer":on-close="closeViewer":url-list="viewerImgList"/></div>

 // 点击缩略图的方法handleImgClick(index) {this.showViewer = true;let tempImgList = [];//所有图片地址this.ruleForm.workerQualificatLicenseImage.map(item=>{tempImgList.push(item.url);});let temp = [];for (let i = 0; i < index; i++) {//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。temp.push(tempImgList.shift());}this.viewerImgList = tempImgList.concat(temp);//将当前图片调整成点击缩略图的那张图片},onPreview() {this.showViewer = true},// 关闭查看器closeViewer() {this.showViewer = false},