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组件学习教程进行学习。

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