Vue图片放大镜组件的封装使用详解

<template>  <div>    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">      <div id="small">  //小图片以及遮罩层容器        <div id="float"></div>  //遮罩层        <img :src="item" id="smallimg">  //需要放大的图片      </div>    </div>    <div id="big">      <img :src="item">    //放大以后的图片    </div>  </div></template><script>  var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l;  export default{    props: {      item: {        type: String      }    },    data() {     return{     }    },     mounted(){      float = document.getElementById("float"); //左侧遮罩层      smallimg = document.getElementById("smallimg"); //左边的小图      big = document.getElementById("big"); //右侧可视区域      bigImg = big.getElementsByTagName("img")[0]; //右侧大图      small = document.getElementById("small");// 左侧的容器      //得到右侧可视区的宽高      var bigW = big.clientWidth;      var bigH = big.clientHeight;      //右侧大图的宽高      var bigImgW = bigImg.offsetWidth;      var bigImgH = bigImg.offsetHeight;      //左侧的小图的宽高      var smallImgW = smallimg.offsetWidth;      var smallImgH = smallimg.offsetHeight;      //左侧遮罩层的宽高      float.style.width =  bigW/bigImgW * smallImgW + "px";   //175      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";           //遮罩层运动的最大距离      float_maxJL_l = small.clientWidth -float.offsetWidth-10;      float_maxJL_t = small.clientHeight - float.offsetHeight-5;      //右侧图片运动的最大距离      bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;      big.style.display = "none";      float.style.visibility ="hidden"; //鼠标未移入左侧区域使遮罩层以及右侧大图均不可见    },    methods: {    //鼠标移入左侧区域使遮罩层以及右侧大图可见      over: function () {        float.style.visibility ="visible";        big.style.visibility ="visible";        big.style.display = "block";      },       //鼠标移出左侧区域使遮罩层以及右侧大图不可见      out: function () {        float.style.visibility ="hidden";        big.style.display = "none";      },       //鼠标移动时遮罩层随鼠标的移动而移动      move: function (ev) {        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;        if( l < 0 ) l = 0;     // 超出左边界赋值为0        if( t < 0 ) t = 0;     // 超出上边界赋值为0        if( l > float_maxJL_l ) l = float_maxJL_l;  //限制其运动范围在容器之内        if( t > float_maxJL_t ) t = float_maxJL_t;        //求出来一个比例        var scaleL = l/float_maxJL_l;        var scaleT = t/float_maxJL_t;         //遮罩层运动位置        float.style.left = l + "px";        float.style.top = t + "px";          //右侧大图运动位置        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";      },    },  }</script>//css样式<style lang="scss" rel="stylesheet/scss" scoped>  @import 'src/assets/scss/variable.scss';  #float {    width: 120px;    height: 120px;    position: absolute;     //必须    background: $primary;    border: 1px solid #ccc;    opacity: 0.5;    cursor:move ;  }  #big {    position: absolute;  //必须    top: 260px;    left: 37.6%;    width: 350px;    height: 500px;    overflow: hidden;    border: 1px solid #ccc;    background: #ffffff;    z-index: 1;    visibility: hidden;  }  #small {    position: relative;  //必须    z-index: 1;    img{      width:340px;      height:320px;    }  }  #big img {    position: absolute;   //必须    z-index: 5;    width:700px;    height:700px;  }</style>

move = function (ev){        var scroll =  this.getClientHeight(); //得到当前界面移动的位置        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;        t=t+scroll;  //遮罩层移动的高度应该相应的加上界面滚动的高度        if( l < 0 ) l = 0;        if( t < 0 ) t = 0;         if( l > float_maxJL_l ) l = float_maxJL_l;        if( t > float_maxJL_t ) t = float_maxJL_t;        var scaleL = l/float_maxJL_l;        var scaleT = t/float_maxJL_t;        float.style.left = l + "px";        float.style.top = t + "px";        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";},//获取界面滚动的高度的方法getClientHeight: function(){    var scrollTop=0;    if(document.documentElement&&document.documentElement.scrollTop)    {      scrollTop=document.documentElement.scrollTop;    }    else if(document.body)    {      scrollTop=document.body.scrollTop;    }    return scrollTop;}