element-ui + vue 实现查看大图（旋转+缩放+全屏）

148 阅读 0 评论 98 点赞

我是靠谱客的博主结实唇膏，这篇文章主要介绍element-ui + vue 实现查看大图（旋转+缩放+全屏），现在分享给大家，希望可以做个参考。

vue 中实现查看大图的功能（包括缩放，旋转，全屏展示等）

复制代码

1
2
3
4
5
6
7
8
9
<div class="demo_image__preview avatar" v-for="(p,k) in JSON.parse(item.letterOfAdmission)" :key="k">
	 <el-image 
	   style="width: 100%; height: 100%"
	   :src="p.url"
	   :preview-src-list="getPreviewImgList(JSON.parse(item.letterOfAdmission))"
	   >
	 </el-image>
</div>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// methods
// 注： 下面的两个方法 最后 return 的数组 里面只可包括路径的数组，否则展示不出
  //多张图片 
 getPreviewImgList: function (arr) {
     let finalArr = [];
     for (let i = 0; i < arr.length; i++) {
         finalArr.push(arr[i].url);
     }
     return finalArr;
   },
   //单张图片
  getPreviewImgListDg:function(arr){
     console.log('arr',arr);
     return arr;
   },