vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)
更新時(shí)間：2021年06月28日 14:34:00 作者：強(qiáng)哥叨逼叨
這篇文章主要為大家詳細(xì)介紹了vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)前頁面的縮放比
若未設(shè)置zoom縮放比，則為默認(rèn)100%，即1，原圖大小
*/
var zoom = parseInt(this.bigImage.style.zoom) || 100;
/* event.wheelDelta 獲取滾輪滾動值并將滾動值疊加給縮放比zoom
wheelDelta統(tǒng)一為±120，其中正數(shù)表示為向上滾動，負(fù)數(shù)表示向下滾動
*/
zoom += event.wheelDelta / 12;
/* 如果縮放比大于0，則將縮放比加載到頁面元素 */
if (zoom >= 100) {
this.bigImage.style.zoom = zoom + "%";
}
/* 如果縮放比不大于0，則返回false，不執(zhí)行操作 */
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("已經(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)滾輪滾動可縮放圖片";
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ū)域無法覆蓋整個(gè)頁面。所以需要在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)前頁面的縮放比
若未設(shè)置zoom縮放比，則為默認(rèn)100%，即1，原圖大小
*/
var zoom = parseInt(this.bigImage.style.zoom) || 100;
/* event.wheelDelta 獲取滾輪滾動值并將滾動值疊加給縮放比zoom
wheelDelta統(tǒng)一為±120，其中正數(shù)表示為向上滾動，負(fù)數(shù)表示向下滾動
*/
zoom += event.wheelDelta / 12;
/* 如果縮放比大于0，則將縮放比加載到頁面元素 */
if (zoom >= 100) {
this.bigImage.style.zoom = zoom + "%";
}
/* 如果縮放比不大于0，則返回false，不執(zhí)行操作 */
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("已經(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)滾輪滾動可縮放圖片";
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡單的柱形圖
這篇文章主要介紹了使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡單的柱形圖,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
過濾器的功能是對要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變原本的數(shù)據(jù),只是產(chǎn)生新的對應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下2022-09-09
本文就討論下怎么實(shí)現(xiàn)一個(gè)處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實(shí)現(xiàn)簡單的響應(yīng)式，對vue文件解析器相關(guān)知識感興趣的朋友一起看看吧2022-06-06
el-form組件清除校驗(yàn)提示正確方法(前端技能提升)
el-form組件提供了表單驗(yàn)證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來進(jìn)行校驗(yàn),這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗(yàn)提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue中有一張響應(yīng)式系統(tǒng)的流程圖，vue會將模板語法編譯成render函數(shù)，通過render函數(shù)渲染生成Virtual?dom，但是官方并沒有對模板編譯有詳細(xì)的介紹，這篇文章帶大家一起學(xué)習(xí)下vue的模板編譯2023-07-07