vue3-zoom-pan-pinch

Super fast and light vue3 npm package for zooming, panning and pinching html elements in easy way

Development

pnpm install

pnpm --filter example run dev

Props of TransformComponent

Props	Default	Type
defaultPositionX	0	number
defaultPositionY	0	number
defaultScale	1	number
options	{...}	object
wheel	{...}	object
pan	{...}	object
pinch	{...}	object

Options prop elements

Props	Default	Type
disabled	false	boolean
minPositionX	null	null, number
maxPositionX	null	null, number
minPositionY	null	null, number
maxPositionY	null	null, number
minScale	1	number
maxScale	8	number
limitToBounds	true	boolean
centerContent	true	boolean

Wheel prop elements

Props	Default	Type
disabled	false	boolean
step	6.5	number
wheelEnabled	true	boolean
touchPadEnabled	true	boolean
disableLimitsOnWheel	true	boolean

Pan prop elements

Props	Default	Type
disabled	false	boolean
lockAxisX	false	boolean
lockAxisY	false	boolean
limitToWrapperBounds	false	boolean

Pinch prop elements

Props	Default	Type
disabled	false	boolean
step	1	number