您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了vue iview多張圖片大圖預(yù)覽,可縮放翻轉(zhuǎn),供大家參考,具體內(nèi)容如下
先看效果:
完整項(xiàng)目代碼地址
具體代碼如下:
<style lang="less"> @import "../advanced-router.less"; </style> <template> <div class="balance-accounts"> <Row class-name="detail-row"> <Card> <p slot="title"> 回單照片 </p> <div class="demo-upload-list" v-for="(item,index) in opPicsList" :key="index"> <img :src="item.url"> <div class="demo-upload-list-cover"> <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() { /* 獲取當(dāng)前頁(yè)面的縮放比 若未設(shè)置zoom縮放比,則為默認(rèn)100%,即1,原圖大小 */ var zoom = parseInt(this.bigImage.style.zoom) || 100; /* event.wheelDelta 獲取滾輪滾動(dòng)值并將滾動(dòng)值疊加給縮放比zoom wheelDelta統(tǒng)一為±120,其中正數(shù)表示為向上滾動(dòng),負(fù)數(shù)表示向下滾動(dòng) */ zoom += event.wheelDelta / 12; /* 如果縮放比大于0,則將縮放比加載到頁(yè)面元素 */ if (zoom >= 100) { this.bigImage.style.zoom = zoom + "%"; } /* 如果縮放比不大于0,則返回false,不執(zhí)行操作 */ return false; }, handleView(name) { if (this.opPicsList[0].name == "none") { this.$Message.error("沒(méi)有圖片哦~"); 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("已經(jīng)是最左邊的一張圖了哦~"); } else { this.currentImageName = this.opPicsList[y - 1].name; let imageE = document.getElementById("bigImageE"); imageE.src = this.opPicsList[y - 1].url; // 加載完成執(zhí)行 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("已經(jīng)是最右邊的一張圖了哦~"); } else { this.currentImageName = this.opPicsList[y + 1].name; let imageE = document.getElementById("bigImageE"); imageE.src = this.opPicsList[y + 1].url; // 加載完成執(zhí)行 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() { //創(chuàng)建圖片顯示 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 = "鼠標(biāo)滾輪滾動(dòng)可縮放圖片"; imageE.id = "bigImageE"; // 加載完成執(zhí)行 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; //添加鼠標(biāo)滾輪事件縮放圖片 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); //創(chuàng)建點(diǎn)擊左右瀏覽按鈕 //左按鈕 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"; //添加鼠標(biāo)點(diǎn)擊事件切換圖片 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"; //添加鼠標(biāo)點(diǎn)擊事件切換圖片 imgRight.addEventListener("click", this.toRightImage); //大圖片選轉(zhuǎn) 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"; //添加鼠標(biāo)點(diǎn)擊事件旋轉(zhuǎn)大圖 imgRotate.addEventListener("click", this.rotateImage); //關(guān)閉按鈕 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"; //添加鼠標(biāo)點(diǎn)擊事件關(guān)閉顯示大圖 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>
可以看到,這個(gè)圖片大圖預(yù)覽是用js創(chuàng)建的,而且是在main元素下添加的元素。因?yàn)檫@個(gè)是在ivew-admin框架下寫的,其主要內(nèi)容區(qū)的z-index是比菜單和header小的,所以如果在內(nèi)容去寫這個(gè)圖片全局預(yù)覽陰影區(qū)域無(wú)法覆蓋整個(gè)頁(yè)面。所以需要在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) => { this.opPicsList.push({ name: index, url: IMAGE_URL_PREFIX + element }); }); this.handleView("0"); }, rollImg() { /* 獲取當(dāng)前頁(yè)面的縮放比 若未設(shè)置zoom縮放比,則為默認(rèn)100%,即1,原圖大小 */ var zoom = parseInt(this.bigImage.style.zoom) || 100; /* event.wheelDelta 獲取滾輪滾動(dòng)值并將滾動(dòng)值疊加給縮放比zoom wheelDelta統(tǒng)一為±120,其中正數(shù)表示為向上滾動(dòng),負(fù)數(shù)表示向下滾動(dòng) */ zoom += event.wheelDelta / 12; /* 如果縮放比大于0,則將縮放比加載到頁(yè)面元素 */ if (zoom >= 100) { this.bigImage.style.zoom = zoom + "%"; } /* 如果縮放比不大于0,則返回false,不執(zhí)行操作 */ return false; }, handleView(name) { if (this.opPicsList[0].name == "none") { this.$Message.error("沒(méi)有圖片哦~"); 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("已經(jīng)是最左邊的一張圖了哦~"); } else { this.currentImageName = this.opPicsList[y - 1].name; let imageE = document.getElementById("bigImageE"); imageE.src = this.opPicsList[y - 1].url; // 加載完成執(zhí)行 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("已經(jīng)是最右邊的一張圖了哦~"); } else { this.currentImageName = this.opPicsList[y + 1].name; let imageE = document.getElementById("bigImageE"); imageE.src = this.opPicsList[y + 1].url; // 加載完成執(zhí)行 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() { //創(chuàng)建圖片顯示 // 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 = "鼠標(biāo)滾輪滾動(dòng)可縮放圖片"; imageE.id = "bigImageE"; // 加載完成執(zhí)行 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"; } }; // imageE.style.width = "100%"; // imageE.style.width = "475px"; // imageE.style.height = window.innerHeight + 'px'; // imageE.style.objectFit= "scale-down"; // imageE.style.height = "100%"; // imageE.style.top = "50%"; // imageE.style.position = "relative"; // imageE.style.transform = "translateY(-50%)"; this.bigImage = imageE; //添加鼠標(biāo)滾輪事件縮放圖片 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); //創(chuàng)建點(diǎn)擊左右瀏覽按鈕 //左按鈕 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"; //添加鼠標(biāo)點(diǎn)擊事件切換圖片 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"; //添加鼠標(biāo)點(diǎn)擊事件切換圖片 imgRight.addEventListener("click", this.toRightImage); //大圖片選轉(zhuǎn) 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"; //添加鼠標(biāo)點(diǎn)擊事件旋轉(zhuǎn)大圖 imgRotate.addEventListener("click", this.rotateImage); //關(guān)閉按鈕 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"; //添加鼠標(biāo)點(diǎn)擊事件關(guān)閉顯示大圖 imgClose.addEventListener("click", this.closeImageShow); // imgLeft.style.display = "none"; // imgRight.style.display = "none"; // imgClose.style.display = "none"; main[0].appendChild(imgLeft); main[0].appendChild(imgRight); main[0].appendChild(imgClose); main[0].appendChild(imgRotate); // main[0].style.textAlign = "center"; // this.imgName = name; // this.visible = true; // } } }, mounted() { // this.loadImages(); } }; </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。