图片预览组件用具名插槽（toolbar/caption/actions/overlay）分离覆盖层区域，组件负责定位、显隐控制与事件透传，使用者自定义内容并响应交互。
用插槽实现图片预览组件的覆盖层，核心在于把“覆盖内容”交给使用者决定，而组件只负责定位、显示控制和基础交互逻辑。关键不是写死遮罩层，而是预留 slot（尤其是具名插槽），让调用方自由注入按钮、文字、进度条、操作栏等。
用具名插槽分离覆盖层区域
不要只留一个默认插槽。按视觉区域拆解：顶部操作区、底部信息区、中央悬浮按钮、角落工具图标。例如：
-
v-slot:toolbar—— 放缩放、下载、旋转按钮 -
v-slot:caption—— 放标题、描述、作者信息 -
v-slot:actions—— 放关闭、收藏、分享等浮动按钮 -
v-slot:overlay—— 兜底全屏覆盖层，用于自定义蒙版样式或动效
覆盖层需绑定显隐与层级逻辑
插槽内容本身不控制显示，必须配合组件内部状态。在预览组件中维护 isPreviewing 和 currentOverlay 等响应式数据，并用 v-if 控制各插槽容器的渲染时机。同时确保父容器设 position: relative，插槽外层包裹元素设 position: absolute + z-index，避免被图片或背景遮挡。
透传事件与上下文，让插槽可交互
单纯插槽无法访问组件内部方法。通过 v-bind 将关键函数暴露出去，比如：
-
:on-close="handleClose"→ 关闭预览 -
:on-zoom="handleZoom"→ 触发缩放 -
:image-info="currentImage"→ 传递当前图片元数据（宽高、URL、索引）
调用时即可在插槽内直接调用：<template #toolbar><button @click="onClose">×</button></template>
适配移动端手势与焦点逻辑
覆盖层在手机端容易误触。建议：
- 给
overlay插槽容器加@touchstart.stop阻止穿透 - 用
tabindex="-1"+focus()实现键盘聚焦，支持空格/Enter 触发操作 - 当用户滑动图片切换时，自动隐藏非必要覆盖层（如 caption），3 秒后恢复，提升沉浸感
不复杂但容易忽略。插槽不是“摆设”，而是把控制权交出去的契约——组件提供位置、状态、能力，使用者决定呈现什么、怎么交互。
