vue-pinch-scroll-zoom

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices.

Installation

npm i @coddicat/vue-pinch-scroll-zoom

Usage

template:

<PinchScrollZoom
ref=”zoomer”
:width=”300″
:height=”400″
:scale=”scale”
@scaling=”scalingHandler”
style=”border: 1px solid black”
>
<img src=”https://picsum.photos/600/1000″ width=”300″ height=”400″ />
</PinchScrollZoom>

script:

import PinchScrollZoom, { PinchScrollZoomEmitData } from “@coddicat/vue-pinch-scroll-zoom”;

export default Vue.extend({
data: () => ({
scale: 2
}),
components: {
PinchScrollZoom,
},
methods: {
scalingHandler(e: PinchScrollZoomEmitData ): void {
console.log(e);
},
reset() {
this.$refs.zoomer.setData({
scale: 1,
originX: 0,
originY: 0,
translateX: 0,
translateY: 0
});
}
}
})

Props

the following properties don’t support the “.async” modifier

name
required
description
default

width
yes
visible area width

height
yes
visible area height

contentWidth
no
should be defined when content width larger than container width

contentHeight
no
should be defined when content height larger than container height

minScale
no
minimum allowable scaling
0.3

maxScale
no
maximum allowable scaling
5

within
no
limit scrolling of content to its borders
true

wheelVelocity
no
zoom velocity when mouse wheel
0.001

scale
no
scale of the content
1

origin-x
no
transform-origin-x
width/2

origin-y
no
transform-origin-y
height/2

translate-x
no
transform: translateX
0

translate-y
no
transform: translateY
0

throttleDelay
no
rendering delay (milliseconds)
25

draggable
no
draggable of/off
true

Events

the following events are emitted with the argument:

export interface PinchScrollZoomEmitData {
x: number;
y: number;
scale: number;
originX: number;
originY: number;
translateX: number;
translateY: number;
}

startDrag
stopDrag
dragging
scaling

Methods

.SetData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
scale: number;
originX: number;
originY: number;
translateX: number;
translateY: number;
}