let imgRight = document.createElement("img");
imgRight.src = iconRight;
imgRight.style.zIndex = "101";
imgRight.style.position = "fixed";
imgRight.style.top = "50%";
imgRight.style.transform = "translateY(-50%)";
imgRight.style.right = "12%";
imgRight.style.cursor = "pointer";
imgRight.className = "showBigImage";
//添加鼠标点击事件切换图片
imgRight.addEventListener("click", this.toRightImage);
//大图片选转
let imgRotate = document.createElement("img");
imgRotate.id = "rotateImageBtn";
imgRotate.src = iconRotate;
imgRotate.style.zIndex = "102";
imgRotate.style.position = "fixed";
imgRotate.style.top = "5%";
imgRotate.style.right = "5%";
imgRotate.style.transform = "translateY(-50%)";
imgRotate.style.cursor = "pointer";
imgRotate.className = "showBigImage";
//添加鼠标点击事件旋转大图
imgRotate.addEventListener("click", this.rotateImage);
//关闭按钮
let imgClose = document.createElement("img");
imgClose.src = iconClose;
imgClose.style.zIndex = "101";
imgClose.style.position = "fixed";
imgClose.style.top = "5%";
imgClose.style.right = "1%";
imgClose.style.transform = "translateY(-50%)";
imgClose.style.cursor = "pointer";
imgClose.className = "showBigImage";
//添加鼠标点击事件关闭显示大图
imgClose.addEventListener("click", this.closeImageShow);
main[0].appendChild(imgLeft);
main[0].appendChild(imgRight);
main[0].appendChild(imgClose);
main[0].appendChild(imgRotate);
}
},
mounted() {
this.loadDetail();
}
};
</script>
可以看到，这个图片大图预览是用js创建的，而且是在main元素下添加的元素。因为这个是在ivew-admin框架下写的，其主要内容区的z-index是比菜单和header小的，所以如果在内容去写这个图片全局预览阴影区域无法覆盖整个页面。所以需要在main下加入元素。
组件方式：
<template>
<div>
</div>
</template>
<script>
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";
import {IMAGE_URL_PREFIX} from "@/config/constant";
export default {
data() {
return {
opPicsList: [
{
name: "none",
url: iconNoImages
}
],
imgName: "",
bigImage: null,
currentImageName: "",
currentRotate: 0
};
},
props: {
},
methods: {
loadImages(opPics) {
this.opPicsList.splice(0, this.opPicsList.length);
opPics.split(",").forEach((element, index) => {
