vue 大量图片展示_vue iview多张图片大图预览、缩放翻转

本文实例为大家分享了vue iview多张图片大图预览，可缩放翻转，供大家参考，具体内容如下

先看效果：

完整项目代码地址

具体代码如下：

@import "../advanced-router.less";

回单照片

import * as API from "@/api/adminApi";

import iconLeft from "@/images/icon-left.png";

import iconRight from "@/images/icon-right.png";

import iconClose from "@/images/icon-close.png";

import iconRotate from "@/images/icon-rotate.png";

import iconNoImages from "@/images/icon-no-images.png";

export default {

name: "shopping-info",

data() {

return {

opPicsList: [

{

name: "none",

url: iconNoImages

}

],

bigImage: null,

currentImageName: "",

currentRotate: 0

};

},

props: ['imageList'],

methods: {

loadDetail() {

let vm = this;

API.getFundClearDetail({ orderId: this.$route.query.orderId }).then(

data => {

if (data.resultObj.detail) {

if (data.resultObj.detail.opPics.length > 0) {

vm.opPicsList.splice(0, vm.opPicsList.length);

data.resultObj.detail.opPics

.split(",")

.forEach((element, index) => {

vm.opPicsList.push({

name: index,

url: element

});

});

}

}

}

);

},

rollImg() {

/* 获取当前页面的缩放比

若未设置zoom缩放比，则为默认100%，即1，原图大小

*/

var zoom = parseInt(this.bigImage.style.zoom) || 100;

/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom

wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动

*/

zoom += event.wheelDelta / 12;

/* 如果缩放比大于0，则将缩放比加载到页面元素 */

if (zoom >= 100) {

this.bigImage.style.zoom = zoom + "%";

}

/* 如果缩放比不大于0，则返回false，不执行操作 */

return false;

},

handleView(name) {

if (this.opPicsList[0].name == "none") {

this.$Message.error("没有图片哦~");

return;

}

this.currentImageName = name;

let elementArr = document.getElementsByClassName("showBigImage");

if (elementArr.length == 0) {

this.createShowImage();

}

for (let y = 0; y < this.opPicsList.length; y++) {

if (name == this.opPicsList[y].name) {

document.getElementById("bigImageE").src = this.opPicsList[y].url;

break;

}

}

},

closeImageShow() {

let elementArr = document.getElementsByClassName("showBigImage");

let main = document.getElementsByClassName("main");

let count = elementArr.length;

for (let i = 0; i < count; i++) {

main[0].removeChild(elementArr[0]);

}

},

rotateImage() {

let imageE = document.getElementById("bigImageE");

this.currentRotate = (this.currentRotate + 90) % 360;

imageE.style.transform =

imageE.style.transform.split(" ")[0] +

" rotate(" +

this.currentRotate +

"deg)";

},

toLeftImage() {

for (let y = 0; y < this.opPicsList.length; y++) {

if (this.currentImageName == this.opPicsList[y].name) {

if (y - 1 < 0) {

this.$Message.info("已经是最左边的一张图了哦~");

} else {

this.currentImageName = this.opPicsList[y - 1].name;

let imageE = document.getElementById("bigImageE");

imageE.src = this.opPicsList[y - 1].url;

// 加载完成执行

imageE.onload = function() {

if (imageE.naturalHeight < window.innerHeight) {

//图片高度小于屏幕则需要垂直居中处理

imageE.style.height = imageE.naturalHeight + "px";

imageE.style.top = "50%";

imageE.style.position = "relative";

imageE.style.transform = "translateY(-50%)";

imageE.style.zoom = "100%";

} else {

//需要去除前一张图片的效果

imageE.style.height = window.innerHeight