vue3.0中手写商品放大镜效果

实现效果

实现分析 

（1） 基础组件布局

 goods-info.vue 父组件

goods-image图片子组件

目前效果

 （2）父传子 传图片数据

goods-info.vue

goods-image子组件

@mouseenter="currIdx=idx"  当鼠标进入小图片时  拿到当前的索引 给左图片进行改变 pictures[currIdx]

  （3）遮罩效果

 goods-image子组件 添加HTML结构和样式

    

      
+      

    

 （4）监听要放大元素的鼠标位置

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

 

1. 使用useMouseInElement 方法   使用vueuse库中都要先安装

npm i @vueuse/core

2. 引入并使用

测试：{{elementX}}, {{elementY}}, {{isOutside}}  //最后不需要删掉 即可



// 导入 useMouseInElement
import { useMouseInElement } from '@vueuse/core'

setup(){
  // 以哪个元素为基准，计算鼠标的位置
  const target = ref(null)
	const { elementX, elementY, isOutside } = useMouseInElement(target)

 	return { currIndex, target, elementX, elementY, isOutside }
}

目前效果

 （5）使遮罩层跟随鼠标的移动

       


 setup () {
    // 当前图片的索引
    const currIdx = ref(0)
    // 获取鼠标在哪个当前元素内
    const target = ref(null)
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    // 准备要给遮罩绑定的 left top 值
    const shadeMove = {
      left: '0px',
      top: ' 0px'
    }
    // 监听鼠标移动的变化
    watch([elementX, elementY, isOutside], () => {
    // elementX 要加.value  不加不生效 小坑！
      const left = elementX.value - 100
      const top = elementY.value - 100
      shadeMove.left = left + 'px'
      shadeMove.top = top + 'px'
    })

    return { currIdx, target, elementX, elementY, isOutside, shadeMove }
  }

 注意为什么要 位置-100呢 首先知道 遮罩的大小是200px  如果不-100  遮罩会在鼠标的左上角显示

图解1

 图解2

 ​​​​

 现在的遮罩是 absolute 绝对定位 也就是可以在页面中 自由飞翔~~~  所以要对遮罩进行控制  只能在当前div块下自由飞翔~~

 加一下判断 

    watch([elementX, elementY, isOutside], () => {
      let left = elementX.value
      let top = elementY.value
      if (left < 0) left = 0
      if (left > 200) left = 200
      if (top < 0) top = 0
      if (top > 200) top = 200
      shadeMove.left = left + 'px'
      shadeMove.top = top + 'px'
    })

  （6）准备大图容器 用来放大显示

 

+  

   
   
 省略其他...
   
   
省略其他...


.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
+  z-index: 500;
+  .large {
+    position: absolute;
+    top: 0;
+    left: 412px;
+    width: 400px;
+    height: 400px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    background-repeat: no-repeat;
+    background-size: 800px 800px;
+    background-color: #f8f8f8;
+  }

 通过background-size进行放大一倍  目前效果图  使用绝对定位 移动到最右边

 （7）实现遮罩移动大图跟随移动

   
 // 定义用来控制大图的显示位置    
    const bigImg = {
      'background-position-X': '0px',
      'background-position-Y': '0px'
    }
    watch([elementX, elementY, isOutside], () => {
      let left = elementX.value - 100
      let top = elementY.value - 100
      if (left < 0) left = 0
      if (left > 200) left = 200
      if (top < 0) top = 0
      if (top > 200) top = 200
      shadeMove.left = left + 'px'
      shadeMove.top = top + 'px'
+   // 因为是小图的二倍 所以 * 2  
+      bigImg['background-position-X'] = -left * 2 + 'px'
+      bigImg['background-position-Y'] = -top * 2 + 'px'
    })

（8）鼠标移出隐藏遮罩和大图

加上两个v-show isOutside代表在盒子外就为true 所以做一个取反

 完整代码

 goods-info.vue 父组件

 goods-image图片子组件