vue-pinch-scroll-zoom
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
https://github.com/coddicat/vue-pinch-scroll-zoom/tree/main_vue3
original_repo:example:
https://vue-pinch-scroll-zoom.coddicat.com/
Installation
npm i @dream07312/vue3-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>
type script:
import { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData, PinchScrollZoomRef } from "@dream07312/vue3-pinch-scroll-zoom";
@Component({
name: "PinchScrollZoomExample",
components: {
PinchScrollZoom
}
})
export default class PinchScrollZoomExample extends Vue {
private scale = 2;
public scalingHandler(e: PinchScrollZoomEmitData): void {
console.log(e);
},
public reset() {
(this.$refs.zoomer as PinchScrollZoomRef).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 |
enableScaling | no | for enable listener scaling event | true |
enableStartDrag | no | for enable listener startDrag event | true |
enableStopDrag | no | for enable listener stopDrag event | true |
enableDragging | no | for enable listener dragging event | 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;
}