用响应式 ref 实现图片点击放大预览，核心是用 ref 管理模态框开关、图片地址及缩放/偏移参数，通过事件绑定更新 ref 值，vue3 自动响应式更新视图，无需手动操作 dom。
用响应式 ref 实现图片点击放大预览，核心是让 ref 管理模态框开关状态 + 图片地址 + 缩放/偏移等交互参数，而不是手动操作 DOM。Vue3 的 ref 天然支持响应式更新视图，配合简单事件绑定就能完成整个流程。
准备基础结构和 ref 状态
先定义几个关键 ref：
- isPreviewOpen：布尔 ref，控制模态框显隐
- previewSrc：字符串 ref，存储被点击图片的 src
- scale：数字 ref，默认为 1，用于后续手势缩放（可选）
- offsetX / offsetY：数字 ref，记录拖拽偏移（可选）
这些 ref 全部用 ref() 声明，在模板中直接使用，无需额外解包。
绑定点击事件并赋值
给每张图片加上 @click，触发时把当前图片地址写入 previewSrc，并打开模态框：
<img v-for="(src, i) in imageList" :key="i" :src="src">
// 在 setup 中
const openPreview = (src) => {
previewSrc.value = src;
isPreviewOpen.value = true;
};
注意：不要用 ref(null) 指向 img 元素再取 .src——这绕远路且不必要。直接传参更清晰、更可靠。
模态框内实现可交互预览
模态框内容用 v-if 控制渲染，避免无意义节点挂载：
<div v-if="isPreviewOpen" class="preview-modal" false>
<div class="preview-content">
<img :src="previewSrc" : style="max-width:90%">
</div>
</div>
如需支持双击缩放或拖拽，只需监听对应事件并更新 scale、offsetX、offsetY 的值，视图会自动响应。
收尾细节不能漏
提升体验的小建议：
- 点击模态框背景关闭，但点击图片本身不关闭（加
@click.stop） - 按
Esc键关闭：在onMounted中绑定keydown监听 - 图片加载失败时显示占位提示，可用
@error事件 fallback - 移动端适配：初始 scale 设为
Math.min(window.innerWidth / imgWidth, 1)防止溢出
