脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue iview多张图片大图预览

vue iview多张图片大图预览、缩放翻转

 更新时间：2021年06月28日 14:34:00   作者：强哥叨逼叨  
这篇文章主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue iview多张图片大图预览，可缩放翻转，供大家参考，具体内容如下

先看效果：

完整项目代码地址

具体代码如下：

<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() {
  /* 获取当前页面的缩放比
   若未设置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>

可以看到，这个图片大图预览是用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) => {
  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%)";
    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 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 = "鼠标滚轮滚动可缩放图片";
  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";
  }
  };
  // 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;
 
  //添加鼠标滚轮事件缩放图片
  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);
 
  // 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈vue项目重构技术要点和总结

    浅谈vue项目重构技术要点和总结

    这篇文章主要介绍了浅谈vue项目重构技术要点和总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • vue.js中使用echarts实现数据动态刷新功能

    vue.js中使用echarts实现数据动态刷新功能

    这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下
    2019-04-04
  • Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    这篇文章主要介绍了Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • 当vue路由变化时,改变导航栏的样式方法

    当vue路由变化时,改变导航栏的样式方法

    今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue3和Vue2的响应式原理

    Vue3和Vue2的响应式原理

    这篇文章我们将探讨Vue3框架的优秀特性、使用原理、周边生态和实战应用，系统的学习Vue生态体系，希望和大家共同成长，我们一起探讨下Vue3和Vue2的响应式原理，那究竟什么是“响应式”，接下来跟着小编一起来学习吧
    2023-05-05
  • 使用wang-editor上传图片后端接收不到的问题解决

    使用wang-editor上传图片后端接收不到的问题解决

    这篇文章主要介绍了如何解决wang-editor 上传图片后端接收不到的问题，文中通过图文结合给大家讲解的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • vue制作点击切换图片效果的详细思路与步骤

    vue制作点击切换图片效果的详细思路与步骤

    这篇文章主要给大家介绍了关于vue制作点击切换图片效果的详细思路与步骤,图片切换是一个很经典的Vue入门学习案例,在你学习完一些基本的v-指令后,你可以尝试去写一个简单的demo去巩固和熟悉这些指令的使用方法,需要的朋友可以参考下
    2023-11-11
  • Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    这篇文章主要介绍了Vue3 + Vue-PDF 实现PDF 文件在线预览实战，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-06-06
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10

最新评论