this.opPicsList.push({
name: index,
url: IMAGE_URL_PREFIX + element
});
});
this.handleView("0");
},
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;
// debugger
// document.getElementById("bigImageE").width = this.opPicsList[y].url;
// document.getElementById("bigImageE").height = this.opPicsList[y].url;
// for (let i = 0; i < elementArr.length; i++) {
// elementArr[i].style.display = "block";
// }
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%)";
