Lens
lens放大镜 · 悬停光标处圆形放大任意 children(零依赖 mask+scale)
用法
基础用法
包裹图片，悬停时在光标处显示圆形放大镜。
tsx
<Lens className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="森林" className="block aspect-[4/3] w-full object-cover" />
</Lens>放大倍数
zoom 控制放大镜下的缩放比例，倍数越大细节越突出。
tsx
<Lens zoom={2.6} className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="森林" className="block aspect-[4/3] w-full object-cover" />
</Lens>镜片尺寸
size 设定放大镜直径(px)，搭配 zoom 调出合适的观察窗。
tsx
<Lens zoom={2} size={200} className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="森林" className="block aspect-[4/3] w-full object-cover" />
</Lens>何时用
想让用户悬停时在光标处用一个圆形镜片局部放大内容（产品图、地图、截图细节）时用。children 可以是任意内容（图片最常见），零依赖、纯 mask+scale 实现。要的是 hover 斜扫反光用 GlareHover；要边框光效用 BorderBeam / ShineBorder。
导入
ts
import { Lens } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| zoom | number | 1.8 | 放大倍数 |
| size | number | — | 镜片直径 px |
| className | string | — | 透传 className |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 被放大的内容（常为 <img>） |
禁忌 / 坑
- 需指针 hover 才触发，纯触屏/键盘场景下无放大效果，不要把它当唯一的细节查看方式。
children必须是有确定尺寸、能被 scale 的可视内容（如block的<img>），否则镜片放大区为空。
相关
BorderBeam · ShineBorder · GlareHover · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>