How to realize the effect of magnifying glass with vue
Most people don't understand the knowledge points of this article "how vue realizes magnifying glass effect", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "how vue realizes magnifying glass effect" together.
Component usage less, make sure loader is installed
This component is a magnifying glass component, and the parameter list is:
·width: must pass, set the width and height of the magnifying glass (square), the magnification area is equal, and the magnification is 2 times
·picList: Required, incoming picture list
Examples of usage:
script:
import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } }
html:
Detailed Code:
HTML:
JS:
export default { props:['width','picList'],//宽度是用来给放大镜的 data(){ return { picIndex:0, isShowVirtual:false, showMask:false, maskPosition:{}, percent:{}, } }, methods:{ computedOffset(obj,prop){ //计算元素到body的绝对位置 if(obj==document.body || obj.offsetParent == document.body){ return parseInt(obj[prop]) } return parseInt(obj[prop])+this.computedOffset(obj.offsetParent,prop) }, changeIndex(e){ this.picIndex = e.target.dataset.index }, showMagnify(e){ this.showMask=true; this.isShowVirtual = true; }, hideMagnify(){ this.isShowVirtual=false; this.showMask=false }, computePosition(e){ let x = e.pageX,y = e.pageY; let mask = this.$refs.mask; let truth = this.$refs.truth; let virtual = this.$refs.virtual; let bigPic = this.$refs.bigPic; x = x-this.computedOffset(truth,'offsetLeft') -mask.offsetWidth/2; y = y-this.computedOffset(truth,'offsetTop')- mask.offsetHeight/2; if(xtruth.offsetWidth - mask.offsetWidth){ x = truth.offsetWidth/2 } if(ytruth.offsetHeight - mask.offsetHeight){ y = truth.offsetHeight/2 } this.maskPosition = { x,y } //计算比例 this.percent={ x:-x/(truth.offsetWidth-mask.offsetWidth)*(bigPic.offsetWidth - virtual.offsetWidth)+'px', y:-y/(truth.offsetHeight-mask.offsetHeight)*(bigPic.offsetHeight - virtual.offsetHeight)+'px' } }, move(e){ this.computePosition(e) } } }
CSS:
.now{ border-color: cyan !important;} .mirror{ width:100%; .wrap{ user-select: none; margin-bottom: 20px; position: relative; background-color: #fff; border:1px solid gray; box-sizing:border-box; cursor: pointer; img{ width:100%; height:100%; } .virtual{ overflow:hidden; width:100%; height:100%; position:absolute; left:calc(100% + 10px); top:0; background-repeat:no-repeat } .mask{ position: absolute; background-image: url('https://cache.yisu.com/upload/ask_collection/20210725/111/120311.png'); background-repeat:repeat; cursor: move; } } .picList{ width:100%; display: flex; justify-content: space-between; flex-wrap:wrap; li{ width:50px; height:50px; margin:5px; border:1px solid transparent; box-sizing: border-box; img{ width:100%; height:100% } } } .picList:after{ content:""; flex:auto; } }以上就是关于"vue怎么实现放大镜效果"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
