vue中el-image-viewer大图预览的使用
需求:上传格式不限,要求文件可以预览以及下载,word、zip等格式预览不要求,图片要能预览解决:引入组件import ElImageViewer from 'element-ui/packages/image/src/image-viewer'components: { ElImageViewer },点击按钮弹窗大图预览<!--大图预览--><el-image-viewerv
·
需求:上传格式不限,要求文件可以预览以及下载,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);
},
更多推荐
已为社区贡献1条内容
所有评论(0)