vue3-zoom-pan-pinch
v1.0.2
Published
vue3 zoom and pan
Downloads
6
Maintainers
Readme
vue3-zoom-pan-pinch
Super fast and light vue3 npm package for zooming, panning and pinching html elements in easy way
Install
npm install --save vue3-zoom-pan-pinch
or
yarn add vue3-zoom-pan-pinch
Usage
import {
defineComponent,
ref,
shallowRef,
watch,
unref,
reactive,
onMounted,
} from "vue";
import { TransformComponent } from "vue3-zoom-pan-pinch";
import car from "./assets/images/car.png";
import "./App.scss";
export default defineComponent({
name: "App",
setup() {
const transformComponentRef = ref(null);
return () => (
<div>
<TransformComponent
ref={transformComponentRef}
defaultScale={1.2}
defaultPositionX={10}
defaultPositionY={20}
wheel={{
step: 1,
}}
>
<div class="content">
<img src={car} />
</div>
</TransformComponent>
<footer>
<button onClick={transformComponentRef.value?.resetTransform}>reset</button>
</footer>
</div>
);
},
});
<script setup lang="ts">
import { TransformComponent } from 'vue3-zoom-pan-pinch'
import car from './assets/car.png'
</script>
<template>
<div>
<TransformComponent
:wheel="{
step: 1
}"
>
<div class="content">
<img :src="car" alt="" srcset="" />
</div>
</TransformComponent>
</div>
</template>
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 |