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

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

<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>

// 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;
   },

最后

以上就是结实唇膏为你收集整理的element-ui + vue 实现查看大图（旋转+缩放+全屏）的全部内容，希望文章能够帮你解决element-ui + vue 实现查看大图（旋转+缩放+全屏）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。