放大镜

A lens component to zoom into images, videos, or practically anything.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/lens.json"

在同一个文件中，复制并粘贴以下代码：

Lens.vue

Rays.vue

Beams.vue

Lens are static in center

Prop 名称	类型	默认值	描述
`zoomFactor`	`number`	`1.5`	The magnification factor for the lens.
`lensSize`	`number`	`170`	The diameter of the lens in pixels.
`position`	`{ x: number, y: number }`	`{ x: 200, y: 150 }`	The static position of the lens (when isStatic is true).
`isStatic`	`boolean`	`false`	If true, the lens stays in a fixed position; if false, it follows the mouse.
`hovering`	`boolean`	`"false"`	External control for the hover state.

Slot Support: Easily add any content inside the component using the default slot.

本页