vue中圖片放大鏡功能

1、在vue項目中不可避免的會做一個圖片放大鏡的弄能（例如、商城、店鋪等），今天同事問了這個功能恰好以前寫過，因此記錄一下。

2、廢話不多說直接上代碼：

父組件中：

<template><div><imgZoom class="imgZoom" v-if="imgpic" :url="imgpic" :highUrl="imgpic"></imgZoom></div> </template> <script> import imgZoom from '@/components/imgZoom.vue' export default {data() {return {imgpic: null};}, components: {imgZoom}, } </script> <style> .imgZoom {width: 400px;height: 400px; }</style>

子組件部分：

<template><div class="pic-img"><div class="img-container" @mousemove="!moveEvent && mouseMove($event)" @mouseleave="!leaveEvent && mouseLeave($event)"><img ref="img" @load="imgLoaded" :src="url" style="width:400px" /><divv-if="!hideZoom && imgLoadedFlag":class="['img-selector', { circle: type === 'circle' }]":style="[imgSelectorSize, imgSelectorPosition, !outShow && imgSelectorBg, !outShow && imgBgPosition]"></div><div v-if="outShow" v-show="!hideOutShow" class="img-out-show" :style="[imgOutShowSize, imgSelectorBg, imgBgPosition]"></div></div></div> </template><script> export default {name: 'vue-photo-zoom-pro',data() {return {selector: {width: 166,halfWidth: 83,top: 0,left: 0,bgTop: 0,bgLeft: 0,rightBound: 0,bottomBound: 0,absoluteLeft: 0,absoluteTop: 0},imgInfo: {},hideOutShow: true,imgLoadedFlag: false,screenWidth: document.body.clientWidth,timer: null// url: '../static/img/zz.jpg',// highUrl: '../static/img/zz.jpg'}},props: {url: String,highUrl: String,type: {type: String,default: 'square',validator: function(value) {return ['circle', 'square'].indexOf(value) !== -1}},scale: {type: Number,default: 2},moveEvent: {type: [Object, MouseEvent],default: null},leaveEvent: {type: [Object, MouseEvent],default: null},hideZoom: {type: Boolean,default: false},outShow: {type: Boolean,default: false}},watch: {moveEvent(e) {this.mouseMove(e)},leaveEvent(e) {this.mouseLeave(e)},url() {this.imgLoadedFlag = false},screenWidth(val) {if (!this.timer) {this.screenWidth = valthis.timer = setTimeout(() => {this.imgLoaded()clearTimeout(this.timer)this.timer = null}, 400)}}},computed: {imgSelectorPosition() {let { top, left } = this.selectorreturn {top: `${top}px`,left: `${left}px`}},imgSelectorSize() {let width = this.selector.widthreturn {width: `${width}px`,height: `${width}px`}},imgOutShowSize() {let {scale,selector: { width }} = thisreturn {width: `${width * scale}px`,height: `${width * scale}px`}},imgSelectorBg() {let {scale,url,highUrl,imgInfo: { height, width }} = thisreturn {backgroundImage: `url(${highUrl || url})`,backgroundSize: `${width * scale}px ${height * scale}px`}},imgBgPosition() {let { bgLeft, bgTop } = this.selectorreturn {backgroundPosition: `${bgLeft}px ${bgTop}px`}}},methods: {imgLoaded() {let imgInfo = this.$refs['img'].getBoundingClientRect()if (JSON.stringify(this.imgInfo) == JSON.stringify(imgInfo)) {// 位置不變不更新return}this.imgLoadedFlag = truelet { width, height, left, top } = (this.imgInfo = imgInfo)let selector = this.selectorlet { width: selectorWidth, halfWidth: selectorHalfWidth } = selectorlet { scrollLeft, scrollTop } = document.documentElementselector.rightBound = width - selectorWidthselector.bottomBound = height - selectorWidthselector.absoluteLeft = left + selectorHalfWidth + scrollLeftselector.absoluteTop = top + selectorHalfWidth + scrollTop},reset() {Object.assign(this.selector, {top: 0,left: 0,bgLeft: 0,bgTop: 0})},mouseMove(e) {if (!this.hideZoom && this.imgLoadedFlag) {this.imgLoaded() //防止img位置變化let { pageX, pageY } = elet { scale, selector } = thislet { halfWidth, absoluteLeft, absoluteTop, rightBound, bottomBound } = selectorlet x = pageX - absoluteLeft // 選擇器的x坐標 相對于圖片let y = pageY - absoluteTop // 選擇器的y坐標if (this.outShow) {halfWidth = 0this.hideOutShow = false}selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0selector.bgLeft = halfWidth - (halfWidth + x) * scale // 選擇器圖片的坐標位置selector.bgTop = halfWidth - (halfWidth + y) * scale}},mouseLeave() {if (this.outShow) {this.hideOutShow = true}}} } </script> <style scoped> .img-container {position: relative; }.img-selector {background-color: rgba(0, 0, 0, 0.6);position: absolute;background-repeat: no-repeat;cursor: crosshair;border: 1px solid rgba(0, 0, 0, 0.1); }.img-selector.circle {border-radius: 50%; }.img-out-show {position: absolute;top: 0;right: 0;background-repeat: no-repeat;transform: translate(100%, 0);border: 1px solid rgba(0, 0, 0, 0.1); } </style>

備注：

:url="imgpic"?

:highUrl="imgpic"

兩個表示需要展示和放大的圖片，需統一

（此方法非原創，但是時間有點久了忘記在那個地方看到的！作者看見勿怪）

總結

以上是生活随笔為你收集整理的vue中如何实现图片放大镜功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。