vue图片鼠标选择右边展示放大区域组件（自封装）

1、封装的组件

<!-- 放大镜组件 -->
<template>
  <div id="container">
    <div class="box1">
        <img :src="imgUrl" alt="" class="img1">
        <div class="yellow"></div>
    </div>
    <div id="rightbox">
        <img :src="imgUrl" alt="" class="img2">
    </div>
  </div>
</template>

<script>
export default {
    name:'ScaleImg',

    props:{
        imgUrl:{
            type: String,
            default: ''
        },
        magnification:{
            type: Number,
            default: 2
        },
        width:{
            type: String,
            default: ''
        },
        height:{
            type: String,
            default: ''
        },
        screenBoxWidth:{
            type: String,
            default: ''
        },
        screenBoxHeight:{
            type: String,
            default: ''
        },
        screenBoxPosition:{
            type: Object
        }
    },

  data () {
    return {

    };
  },

  components: {},

  computed: {},

  mounted() {
    this.scale()
  },

  methods: {
    scale(){
        if(this.imgUrl){
                var box1=document.querySelector('.box1')
                var yellow=document.querySelector('.yellow')
                var box2=document.querySelector('#rightbox')
                var srceen=document.querySelector('.img2')
                if(this.width && this.height){
                    box1.style.width = this.width + 'px'
                    box1.style.height = this.height + 'px'
                    if(JSON.stringify(this.screenBoxPosition)!='{}'){
                        box2.style.left = this.screenBoxPosition.left + 'px'
                        box2.style.top = (this.screenBoxPosition.top + 'px') || '0px'
                    }else{
                        box2.style.left = (parseInt(this.width) + 150) + 'px'
                    }
                    //展示盒子大小
                    if(this.screenBoxWidth || this.screenBoxHeight){
                        box2.style.width = this.screenBoxWidth + 'px'
                        box2.style.height = this.screenBoxHeight + 'px'
                    }else{
                        box2.style.width = this.width + 'px'
                        box2.style.height = this.height + 'px'
                    }
                    if(this.magnification){
                        srceen.style.width = (this.width * this.magnification) + 'px'
                        srceen.style.height = (this.height * this.magnification) + 'px'
                    }
                }
                
                box1.onmouseenter=function(){
                    box2.style.display='block'
                }
                box1.onmouseleave=function(){  
                    box2.style.display='none'
                }
                // 鼠标在图片上移动触发事件
                box1.onmousemove=function(e){
                // 算出小盒子在图片的中心点
                var x=e.clientX-box1.getBoundingClientRect().left-yellow.offsetWidth/2
                var y=e.clientY-box1.getBoundingClientRect().top-yellow.offsetHeight/2
           
            
                //判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
                if(x<0){
                    // 此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
                    x=0
                }else if(x>box1.offsetWidth-yellow.offsetWidth){
                    // 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
                    x=box1.offsetWidth-yellow.offsetWidth
                }

                if(y<0){
                    y=0
                }else if(y>box1.offsetHeight-yellow.offsetHeight){
                    y=box1.offsetHeight-yellow.offsetHeight
                }
        
                // 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
                yellow.style.left=x+'px'
                yellow.style.top=y+'px'
    
                // 通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例，(反方向移动)
                srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
                srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
                
                // 黄色小盒子自适应(可以自己设定，根据图片比例就行)
                yellow.style.width= (box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth))+'px'
                yellow.style.height= (box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight))+'px'
            }

      }
    }
  }
}

</script>
<style lang='scss' scoped>
    *{
        padding: 0;
        margin: 0;
    }
    #container{
        position: relative;
    }
    .img1{
        width: 200px;
        height: 200px;
    }
    .img2{
        width: 100px;
        height: 400px;
        position: absolute;
    }
    #rightbox{
        position: absolute;
        top: 0;
        left: 400px;
        width: 200px;
        height: 200px;
        overflow: hidden;
        display: none;
    }
    .yellow{
        background-color: yellow;
        opacity: 0.5;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .box1{
        width: 200px;
        height: 200px;
        position: relative;
    }
</style>

2、使用

 3、参数介绍