本文例項為大家分享了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="vue.js實現雙擊放大預覽功能" 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,.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,.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元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。