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-viewer
                                v-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
        },