vue iview多张图片大图预览、缩放翻转

imageE.style.zoom = "100%";
} else {
//需要去除前一张图片的效果
imageE.style.height = window.innerHeight + "px";
imageE.style.top = "0";
imageE.style.position = "relative";
imageE.style.transform = "translateY(0%)";
imageE.style.zoom = "100%";
}
};
}
break;
}
}
},
toRightImage() {
for (let y = 0; y < this.opPicsList.length; y++) {
if (this.currentImageName == this.opPicsList[y].name) {
if (y + 1 == this.opPicsList.length) {
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 + "px";
imageE.style.top = "0";
imageE.style.position = "relative";
imageE.style.transform = "translateY(0%)";
imageE.style.zoom = "100%";
}
};
}
break;
}
}
},
createShowImage() {
//创建图片显示
// let elementArr = document.getElementsByClassName("showBigImage");
// if (elementArr.length == 0) {
let main = document.getElementsByClassName("main");
let topContainer = document.createElement("div");
let scrollContainer = document.createElement("div");
topContainer.style.position = "fixed";
topContainer.style.zIndex = "80";
topContainer.style.background = "rgba(0,0,0,0.80)";
topContainer.style.height = "100%";
topContainer.style.width = "100%";
topContainer.style.textAlign = "center";
topContainer.className = "showBigImage";
// topContainer.style.display = "none";

let imageContainer = document.createElement("div");
imageContainer.style.width = window.innerWidth + "px";
imageContainer.style.height = window.innerHeight + "px";
imageContainer.style.margin = "0 auto";
imageContainer.style.overflow = "auto";
imageContainer.style.top = "50%";
imageContainer.style.position = "relative";
imageContainer.style.transform = "translateY(-50%)";

let imageE = document.createElement("img");
imageE.src = iconNoImages;
imageE.title = "鼠标滚轮滚动可缩放图片";
imageE.id = "bigImageE";
// 加载完成执行
imageE.onload = function() {
if (imageE.naturalHeight < window.innerHeight) {