Vue图片预览模态框通过ref管理isPreviewOpen、previewSrc、scale、offsetX、offsetY等响应式状态，结合@click、@wheel、@mousedown等事件实现显隐、缩放、拖拽，用:style动态绑定transform，辅以Esc关闭、错误回退、移动端适配和背景滚动禁用。
用 Vue 基础语法实现图片预览与缩放模态框，核心是状态驱动 + 事件响应 + 样式动态控制，不需要引入第三方库也能跑起来。重点在于把“是否显示”“当前图片”“缩放比例”“拖拽偏移”这些变量都用 ref 或 data 管理好，再通过事件更新它们，视图就自动跟着变。
定义基础状态和响应式数据
在 setup 或 data 中声明几个关键变量：
- isPreviewOpen：布尔值，控制模态框显隐
- previewSrc：字符串，存被点击图片的 URL
- scale：数字，默认为 1，用于缩放（比如双击放大、滚轮调整）
- offsetX / offsetY：数字，记录拖拽时的横向/纵向偏移量（初始为 0）
- （可选）rotate：数字，支持 90° 增量旋转
绑定点击事件打开预览
给小图加 @click，传入图片地址即可：
<img v-for="(src, i) in imageList" :key="i" :src="src" @click="openPreview(src)" />
在方法里直接赋值：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const openPreview = (src) => {
previewSrc.value = src;
scale.value = 1;
offsetX.value = 0;
offsetY.value = 0;
isPreviewOpen.value = true;
};
不用操作 DOM 元素取 .src，传参更干净可靠。
模态框内实现缩放与拖拽交互
模态框用 v-if 控制渲染，避免无意义节点挂载；图片样式用 :style 动态绑定 transform：
<div v-if="isPreviewOpen" class="preview-modal" @click="isPreviewOpen.value = false">
<div class="preview-content" @click.stop>
<img
:src="previewSrc"
:style="{
transform: `scale(${scale}) translate(${offsetX}px, ${offsetY}px) rotate(${rotate}deg)`
}"
@wheel="handleWheel"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
@mouseleave="endDrag"
/>
</div>
</div>
- 滚轮缩放：监听
@wheel，根据event.deltaY调整scale（加个上下限，比如 0.5～3） - 拖拽移动：鼠标按下时记录起始位置，移动时计算差值并更新
offsetX / offsetY - 点击背景关闭，但点图片本身不关闭 → 用
@click.stop阻止冒泡
提升体验的小细节
这些不是必须，但用户感知明显：
- 按
Esc关闭：在onMounted里监听keydown，判断event.key === 'Escape' - 图片加载失败 fallback：加
@error事件，比如previewSrc.value = '/placeholder.png' - 移动端适配：初始
scale可设为Math.min(window.innerWidth / imgNaturalWidth, 1)，防止一打开就溢出 - 禁止背景滚动：模态框打开时，
document.body.style.overflow = 'hidden'；关闭时还原
不复杂但容易忽略
