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

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 + "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%";