Appearance
Image 图片
图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败，以及故障风、3D倾斜、放大镜等特色功能。
基础用法
可通过 fit 确定图片如何适应容器框，同原生 object-fit。
占位内容
可通过 slot = placeholder 可自定义加载时的占位内容。
加载失败
可通过 slot = error 可自定义加载失败的内容。
懒加载
可通过 lazy 开启懒加载功能，当图片滚动到可视范围内才会加载。
大图预览
可通过 previewSrcList 开启预览大图的功能。
特色功能：故障风 (Cyberpunk Glitch)
为图片添加赛博朋克风格的故障动画效果。
特色功能：3D 倾斜 (Tilt)
鼠标悬停时，图片会跟随鼠标位置产生 3D 倾斜效果。
特色功能：倒影 (Reflection)
为图片添加底部倒影效果，增加视觉层次感。
特色功能：放大镜 (Magnifier)
鼠标悬停时显示局部放大镜效果，适用于查看图片细节。
Image 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| src | 图片源，同原生 | string | — | — |
| fit | 确定图片如何适应容器框，同原生 object-fit | string | fill / contain / cover / none / scale-down | — |
| loading | 原生 loading 属性 | string | eager / lazy | — |
| lazy | 是否开启懒加载 | boolean | — | false |
| preview-src-list | 开启图片预览功能 | string[] | — | [] |
| initial-index | 初始预览图像索引 | number | — | 0 |
| z-index | 设置图片预览的 z-index | number | — | 2000 |
| preview-teleported | image-viewer 是否插入至 body 元素上 | boolean | — | true |
| hide-on-click-modal | 当点击遮罩层时，是否关闭图片预览 | boolean | — | false |
| glitch | 开启故障风动画效果 | boolean | — | false |
| tilt | 开启 3D 倾斜效果 | boolean | — | false |
| reflection | 开启倒影效果 | boolean | — | false |
| magnifier | 开启放大镜效果 | boolean | — | false |
Image 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| load | 图片加载成功触发 | (e: Event) |
| error | 图片加载失败触发 | (e: Event) |
| switch | 切换预览图片时触发 | (index: number) |
| close | 关闭预览时触发 | — |
| show | 打开预览时触发 | — |
Image 插槽
| 插槽名 | 说明 |
|---|---|
| placeholder | 图片未加载的占位内容 |
| error | 图片加载失败的内容 |