【图片放大镜】

一、准备大图容器和遮罩容器

二、使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量

三、计算出 遮罩容器定位与大容器北京定位 暴露出数据给模板使用

1.准备要用的数据

	// 1.是否显示遮罩和大图片
    const show = ref(false)  //默认看不见
    // 2.遮罩层的坐标(样式)
    const layerPosition = reactive({
        left:0,
        top:0
    })
    // 3.大图的背景定位（样式）
    const largePosition = reactive({
        backgroundPositionX:0,
        backgroundPositionY:0
    })

2.其对应结构

3.使用useMouseInElement得到基于左上角的坐标和是否离开元素数据

    const target = ref(null)
    const {elementX, elementY, isOutside} = useMouseInElement(target)

4.监听这些值得变化 并修改我们定义好的数据

watch([elementX, elementY, isOutside],()=>{
        // 根据得到的数据设置自己的样式数据和是否显示数据
        // 当鼠标在中等盒子里面  则显示大图和遮罩 
        show.value = !isOutside.value
        // 计算坐标
        const position = {x:0,y:0}

        // x
        if(elementX.value <100) position.x = 0
        else if(elementX.value >300) position.x = 200
        else position.x = elementX.value - 100

        // y
        if(elementY.value <100) position.y = 0
        else if(elementY.value >300) position.y = 200
        else position.y = elementY.value - 100

        // 给样式赋值
        layerPosition.left = position.x + 'px'
        layerPosition.top = position.y + 'px'
        largePosition.backgroundPositionX = - 2* position.x + 'px'
        largePosition.backgroundPositionY = - 2* position.y + 'px'

    })

5.数据返回给模板 在模板中使用

    return {target, currIndex ,show ,layerPosition, largePosition};

具体代码

结果展示