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

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