完整项目代码地址
具体代码如下：
<style lang="less"> @import "../advanced-router.less"; </style> <template> <div> <Row class-name="detail-row"> <Card> <p slot="title"> 回单照片 </p> <div v-for="(item,index) in opPicsList" :key="index"> <img :src="item.url"> <div> <Icon type="ios-search-strong" @click.native="handleView(item.name)"></Icon> </div> </div> </Card> </Row> </div> </template> <script> 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 + "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 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"; 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) { //图片高度小于屏幕则需要垂直居中处理 // imageE.style.width = "100%"; imageE.style.top = "50%"; imageE.style.position = "relative"; imageE.style.transform = "translateY(-50%)"; } else { imageE.style.height = window.innerHeight + "px"; } }; this.bigImage = imageE; //添加鼠标滚轮事件缩放图片 if (imageE.addEventListener) { // IE9, Chrome, Safari, Opera imageE.addEventListener("mousewheel", this.rollImg, false); // Firefox imageE.addEventListener("DOMMouseScroll", this.rollImg, false); } else { // IE 6/7/8 imageE.attachEvent("onmousewheel", this.rollImg); } imageContainer.appendChild(imageE); topContainer.appendChild(imageContainer); main[0].appendChild(topContainer); //创建点击左右浏览按钮 //左按钮 let imgLeft = document.createElement("img"); imgLeft.src = iconLeft; imgLeft.style.zIndex = "101"; imgLeft.style.position = "fixed"; imgLeft.style.top = "50%"; imgLeft.style.transform = "translateY(-50%)"; imgLeft.style.left = "12%"; imgLeft.style.cursor = "pointer"; imgLeft.className = "showBigImage"; //添加鼠标点击事件切换图片 imgLeft.addEventListener("click", this.toLeftImage); //右按钮 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>