【vue3】图片预览组件实战：小图切换与放大镜效果实现

在电商详情页中，图片预览组件是提升用户体验的关键功能。本文将结合 Vue 3 组合式 API 与实战代码，详细解析如何实现「小图切换大图」与「放大镜」效果，涵盖功能拆解、核心逻辑实现及细节优化。

一、功能需求与效果预览

核心功能

1. 小图切换大图：鼠标移入小图时，左侧大图显示对应图片，小图出现激活状态。
2. 放大镜效果：鼠标在左侧大图区域移动时，显示半透明滑块，右侧放大镜区域同步放大显示滑块内的细节，鼠标移出时隐藏滑块和放大镜。

最终效果

• 小图列表横向排列，激活状态小图带边框高亮。
• 左侧大图区域尺寸为 400x400，右侧放大镜区域放大两倍显示选中区域（400x400 显示 800x800 原图细节）。
• 滑块跟随鼠标移动，边界自动限制，避免超出大图范围。

二、实现思路与技术选型

技术栈

• Vue 3：使用组合式 API（script setup）和响应式数据（ref）。
• VueUse：通过 useMouseInElement 钩子获取鼠标在指定元素内的相对位置，简化 DOM 交互逻辑。

https://v11-3-0.vueuse.org/core/useMouseInElement/#usemouseinelement

• SCSS：实现响应式布局和视觉效果，如动态样式绑定、边界阴影等。

核心逻辑拆解

1. 小图切换：维护当前激活索引 activeIndex，鼠标移入小图时更新索引，驱动大图和小图激活状态渲染。
2. 鼠标位置追踪：利用 useMouseInElement 获取鼠标在左侧大图区域的坐标（elementX, elementY），判断是否在区域内（isOutside）。
3. 滑块移动控制：根据鼠标坐标计算滑块位置，处理边界条件（防止滑块超出大图范围），通过样式绑定动