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


Posted in Javascript onJuly 13, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
vue实现图片预览组件封装与使用
Jul 13 #Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 #Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
javascript数组去重小结
2016/03/07 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python中有趣在__call__函数
2015/06/21 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python之super的使用小结
2018/08/13 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python实现密码强度校验
2020/03/18 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
信息工作经验交流材料
2014/05/28 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python