本文实例为大家分享了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; 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组件学习教程进行学习。

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