-
首先准备大图容器和遮罩容器
-
然后使用
@vueuse/core
的useMouseInElement
方法获取基于元素的偏移量 -
计算出 遮罩容器定位与大容器背景定位 暴露出数据给模板使用
//这是大图 根据是鼠标进入小图来进行显示和隐藏 <div class="large" v-show="isShow" :style="[{backgroundImage:`url(${images[currIndex]})`},bgPosition]"> </div> <div class="middle" ref="target"> //监听的区域 <img :src="images[currIndex]" alt=""> <!-- 遮罩层 --> <div class="layer" :style="[position]"></div> </div>
const usePreviewImage = () => { // 被监听的区域 const target = ref(null) // 控制遮罩层和预览图的显示和隐藏 const isShow = ref(false) // 遮罩层位置坐标 const position = reactive({ left: 0, top: 0 }) // 右侧预览大图的坐标 const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) const { elementX, elementY, isOutside } = useMouseInElement(target) // 基于侦听器侦听值的变化 watch([elementX, elementY, isOutside], () => { // console.log(elementX.value, elementY.value, isOutside.value) // 通过标志位控制显示和隐藏 isShow.value = !isOutside.value if (isOutside.value) return // X方向坐标范围控制 if (elementX.value < 100) { // 左侧 position.left = 0 } else if (elementX.value > 300) { // 右侧 position.left = 200 } else { // 中间 position.left = elementX.value - 100 } // Y方向坐标范围控制 if (elementY.value < 100) { // 左侧 position.top = 0 } else if (elementY.value > 300) { // 右侧 position.top = 200 } else { // 中间 position.top = elementY.value - 100 } // 计算预览大图的移动的距离 bgPosition.backgroundPositionX = -position.left * 2 + 'px' bgPosition.backgroundPositionY = -position.top * 2 + 'px' // 计算遮罩层的位置 position.left = position.left + 'px' position.top = position.top + 'px' }) return { position, bgPosition, isShow, target } }
小图宽高400px 遮罩层宽高200px