电商项目必备技能=＞放大镜

电商项目必备技能 ===> 放大镜

放大镜的主要原理就是两个同样大小的盒子,两张图片,大图是小图的两倍,根据鼠标位置的移动来显示遮罩层里面的内容

实现步骤:
1.当鼠标进入,显示遮罩层
2.遮罩层要跟随鼠标
3.显示放大区域

使用vueuse 工具库中的 useMouseInElement 方法
它可以检测到鼠标距离左上角的距离和当前鼠标是否在元素内,useMouseInElement内有三个属性

isOutside : 检查鼠标是否在元素**外部** 
elementX : 检测鼠标当前位置离元素的X轴的距离
elementY : 检测鼠标当前位置离元素的Y轴的距离

得到鼠标是否在元素内部,可以通过v-show让遮罩层显示或隐藏

//声明一个自定义计算属性position
const target = ref(null)
const { isOutside, elementX, elementY } = useMouseInElement(target)
const position = computed(() => {
    //遮罩层的大小为200*200,name中心点到边角的中心点就是
    let x = elementX.value - 100  
    let y = elementY.value - 100
    //这早层不能移出盒子,做判断
    if (x < 0) { x = 0 }
    if (x > 200) { x = 200 }
    if (y < 0) { y = 0 }
    if (y > 200) { y = 200 }
    return {
        x,
        y
    }
})

 <div 
 class="layer"
 v-show="!isOutside" //显示或者隐藏遮罩层
:style="{ left: position.x + 'px', top: position.y + 'px' }" //遮罩层跟随鼠标
></div>

利用盒子不动背景图片动,大图是小图两倍的情况下

//在大图中加上
backgroundPosition: `-${position.x*2}px -${position.y*2}px`

就可实现放大镜效果