一个手写的Vue放大镜，复制即可使用

一个手写的vue放大镜

组件使用less，请确保已安装loader
本组件为放大镜组件，传参列表为:

• width: 必传，设置放大镜的宽高(正方形)，放大区域等同，放大倍数为2倍

• picList:必传，传入图片列表

  使用示例:

  script:

  import mirror from 'xx/mirror'
  export default {
  components:{
  mirror
  },
  data(){
  return {
  width:300,
  picList:[
  xxxxxx,
  xxxxxx
  ],
  }
  }
  }

  html:

详细代码:

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(x<=0) {
x=0
}else if(x>truth.offsetWidth - mask.offsetWidth){
x = truth.offsetWidth/2
}

if(y<=0){
y=0;
}
else if(y>truth.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:

可直接复制文件内容至项目使用，文件地址：https://blog-static.cnblogs.com/files/hhyf/mirror.vue.js

效果