vue.js实现双击放大预览功能

本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下

imgPreview组件

<template>
 <div class="vue-uploader" @keyup.esc.native="hide">
 <div v-if="visible" @click.self="hide" class="img_model" >
  <div class="img-btn btn-pre" @click="preImg" v-show="imgList.length>1"><i class="el-icon-arrow-left"></i></div>
  <div class="img-btn btn-next" @click="nextImg" v-show="imgList.length>1"><i class="el-icon-arrow-right"></i></div>
  <div class="center-box">
  <div class="img_box" v-bind:style="{ transform: 'rotate(' + deg + 'deg)' }">
   <img :src="imgList[imgIndex]" alt="" id="oImg" @click="e=>e.stopPropagation()" v-bind:style="{ zoom: zoom }">
  </div>
  </div>
  <div @click="e=>e.stopPropagation()" class="btns">
  <img src="https://static-frontpicture.lexing360.com/min.png" @click="imgToSize(false)">
  <img src="https://static-frontpicture.lexing360.com/rotate.png" @click="rotate">
  <img src="https://static-frontpicture.lexing360.com/plus.png" @click="imgToSize(true)">
  </div>
 </div>
 </div>
</template>
<script>
 export default {
 props: {
  initImgIndex: {
  required: true
  },
  imgList: {
  required: true,
  },
  visible: {
  required: true
  },
 },
 data() {
  return {
  src: '',
  pasteText: '',
  zoom: '100%',
  imgIndex: 0,
  deg: 0,
  firstTag: true
  }
 },
 created () {
  this.imgIndex = this.initImgIndex
 },
 watch: {
  visible(val) {
  this.imgIndex = this.initImgIndex
  this.zoom = '100%'
  this.firstTag = true
  this.$emit('update:visible', val);
  if (val) {
   this.$emit('open');
  } else {
   this.$el.removeEventListener('scroll', this.updatePopper);
   this.$emit('close');
  }
  }
 },
 methods: {
  imgToSize(oBool) {
  if (this.firstTag && !oBool && document.getElementById('oImg') && document.getElementById('oImg').naturalWidth > window.innerWidth) {
   this.zoom = parseInt(window.innerWidth * 0.9 / document.getElementById('oImg').naturalWidth * 100) + '%'
   this.firstTag = false
  }
  if ((document.getElementById('oImg').width * parseInt(this.zoom) / 100 <= 200 || this.zoom == '2%') && !oBool) {
   this.$message.info('已经最小了!')
   return
  }
  if (document.getElementById('oImg') && document.getElementById('oImg').x <= window.innerWidth * 0.05 && oBool) {
   this.$message.info('已经最大了!')
   return
  }
  this.zoom = parseInt(this.zoom) + (oBool ? 2 : -2) + '%';
  },
  rotate () {
  this.deg += 90
  },
  nextImg (e) {
  e.stopPropagation()
  if (this.imgIndex == this.imgList.length-1) {
   this.imgIndex = 0
  } else {
   this.imgIndex ++
  }

  },
  preImg(e) {
  e.stopPropagation()
  if (this.imgIndex == 0) {
   this.imgIndex = this.imgList.length - 1
  } else {
   this.imgIndex --
  }
  },

  hide (cancel) {
  if (cancel !== false) {
   this.$emit('update:visible', false);
   this.$emit('visible-change', false);
  }
  },
 }
 }
</script>
<style>
 .img_model{
 position: fixed;
 width: 100%;
 min-height: 100%;
 background: rgba(0,0,0,.5);
 top: 0;
 left: 0;
 z-index: 9999;
 /* text-align: center; */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
 .center-box {
 position: relative;
 max-width: 90%;
 }
 .img_model .img_box {
 max-width: 100%;
 max-height: 800px;
 overflow-y: scroll;
 }
 .img_model .img_box::-webkit-scrollbar {
 display: none;
}
 .img_model .img_box img{
 max-width: 100%;
 }
 .img_model .img-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 100;
 width: 50px;
 height: 70px;
 font-size: 30px;
 line-height: 70px;
 text-align: center;
 background: rgba(255, 255, 255, .3);
 color: #FFF;
 }
 .img_model .btn-pre {
 left: 5%;
 }
 .img_model .btn-next {
 right: 5%;
 }
 .img_model .img_box .btn-next {
 right: 20rpx;
 }
 .img_model .btns{
 position: fixed;
 bottom: 25px;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 }
</style>

引入这个组件

import imgPreview from './imgPreview'
 data:{
  return{
  bigImgShow: false,
  bigImgIndex:'',
  imgList:[],
  }
 }
 components: {
  imgPreview
 },
 method:{
  previewImage (imgList, index) {
  if (imgList) {
   this.imgList = imgList
   this.bigImgIndex = index
   this.bigImgShow = true
  }
  },
 }

template里面渲染

<imgPreview :visible.sync="bigImgShow" :initImgIndex="bigImgIndex" :imgList="imgList"></imgPreview> 

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

(0)

相关推荐

  • vue.js实现照片放大功能

    本文实例为大家分享了vue.js实现照片放大的具体代码,供大家参考,具体内容如下 这里就不放图了,放大的是别人的身份证 <template> <div class="image-cell__wrapper" :style="border"> <span class="title" :style="{color: titleColor}">{{ imageTitle }}</span&g

  • vue.js+Echarts开发图表放大缩小功能实例

    最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在

  • vue.js实现双击放大预览功能

    本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下 imgPreview组件 <template> <div class="vue-uploader" @keyup.esc.native="hide"> <div v-if="visible" @click.self="hide" class="img_model" > <div c

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • vue项目实现github在线预览功能

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏

  • JS实现上传图片实时预览功能

    前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na

  • js仿淘宝商品放大预览功能

    将鼠标移动至图片区域可放大预览 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0; margin:0;} #img1{width:300px; height:200px;} #sp1{width:60px;

  • 微信小程序实现图片放大预览功能

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码: <!--图片描述--> <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item

  • Vue+ElementUI使用vue-pdf实现预览功能

    Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应的组件 我这是通过点击 预览 按钮 获取id打开一个dialog来实现 <!--PDF 预览--> <el-dialog :title="PDF 预览" :visible.sync="viewVisible" width="80%"

  • vue实现图片上传预览功能

    本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--点击上传按钮--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @c

  • 微信小程序选择图片和放大预览图片功能

    视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c

  • 微信小程序实现图片预览功能

    本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下 效果图 原理 使用wx.chooseImage选择本地图片: 使用wx.previewImage预览图片. WXML <view> <button bindtap="previewImage" type="primary">图片上传预览</button> <view class="tui-content"> <imag

随机推荐