Magnifier Component

Overview

The Magnifier component allows users to view an enlarged portion of an image in a container like a glass magnifier when they hover over the image.

Basic Usage

<Magnifier :src="imageSrc" :zoom-scale="3" :size="250" />

Note

You can also increase or decrease the magnifier size using the mouse wheel.

Props and Events

Props

Name	Type	Default	Description
src	String	required	The source URL of the image to be zoomed.
alt	String	"zoomed-img"	Alternative text description of the image for accessibility.
zoomScale	Number	2	The desired zoom scale of the image.
size	Number	200	The initial magnifier size in pixels.
resizeOnWheel	Boolean	true	Allow magnifier resize on mouse wheel.

Events

Name	Description
load	Triggered when the image has successfully loaded.
error	Triggered when there is an error loading the image.