图片预览组件通过具名插槽实现内容分发：v-slot:toolbar、caption、actions、overlay 分区承载工具栏、信息条、浮动按钮和覆盖层；插槽由 isPreviewing 控制显隐，绝对定位+z-index 确保层级，透传 image-info 和 close/rotate 等方法，并适配移动端触摸与键盘操作。
用插槽实现图片预览组件的预览层分发，核心是把“显示什么内容”交给使用者决定，组件只管“在哪显示、何时显示、怎么交互”。不是写死一层蒙版，而是按区域预留多个具名插槽，让调用方自由注入操作按钮、标题、进度提示或自定义动效。
按功能区域拆解具名插槽
一个清晰的预览层结构需要视觉分区，对应不同职责的插槽：
- v-slot:toolbar：顶部固定栏，适合放缩放、旋转、下载等工具按钮
- v-slot:caption：底部信息条，承载标题、作者、尺寸、版权说明等文字信息
- v-slot:actions：浮动操作按钮（如关闭 ×、收藏 ❤️、分享 ↗️），通常定位在右上角
- v-slot:overlay：全屏覆盖层，用于兜底样式定制（比如半透明毛玻璃背景）或全局动效控制
插槽容器需绑定状态与定位逻辑
插槽本身不带显隐和位置，必须由组件内部驱动：
- 用响应式变量如 isPreviewing 控制整个预览层是否渲染，各插槽外层统一加
v-if="isPreviewing" - 父容器设
position: relative，每个插槽外层包裹元素设position: absolute+ 合理z-index，避免被图片遮挡 - 例如 toolbar 容器可设
top: 0; left: 0; right: 0;，actions 容器设top: 16px; right: 16px;
向插槽内透传上下文与方法
插槽内容要能真正交互，不能只摆样子：
- 通过
:image-info="currentImage"把当前图片元数据（URL、宽高、索引、alt 文本）传给插槽 - 暴露关键方法如
:close="handleClose"、:rotate="handleRotate"，供插槽内按钮直接调用 - 在插槽中可这样写：
<template #actions><button @click="close">×</button></template>
适配移动端与用户行为习惯
预览层在手机端容易误触或干扰滑动手势，需针对性处理：
- 给 overlay 插槽外层加
@touchstart.stop阻止事件穿透到下层图片 - 为可聚焦操作项（如关闭按钮）添加
tabindex="-1"，支持键盘空格/Enter 触发 - 图片切换时自动隐藏 caption 和 toolbar，3 秒后恢复，保持沉浸感又不失可用性
