vue中el-image-viewer大图预览的使用

需求：上传格式不限，要求文件可以预览以及下载，word、zip等格式预览不要求，图片要能预览


解决：
引入组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
components: { ElImageViewer },

点击按钮弹窗大图预览

<!--大图预览-->
      <el-image-viewer
           v-if="showViewer"
           :on-close="closeViewer"
           :url-list="viewPhotoList"
       />
       //viewPhotoList 为图片路径数组，接口返回的数据处理，将图片整合到这个数组

// 关闭查看器
        closeViewer() {
            this.showViewer = false
        },
        // 点击按钮预览图片
        onPreview(img) {
            this.showViewer = true;
            this.viewPhotoList.forEach((item,index)=>{
                if(img==item){
                    this.imgSrcIndex=index;
                }
            })
            //大图预览从点击的那张开始
            let tempImgList = [...this.viewPhotoList];
            let temp = [];
            for (let i = 0; i < this.imgSrcIndex; i++) {
                temp.push(tempImgList.shift());
            }
            this.viewPhotoList = tempImgList.concat(temp);
        },