vue-zoomer
Zoom the image or other thing with mouse or touch. Based on https://github.com/jarvisniu/vue-zoomer/.
Demo
Usage
Install:
yarn add @ikoncept/vue-zoomer
Import:
import Vue from 'vue'
import VueZoomer from '@ikoncept/vue-zoomer'
Vue.use(VueZoomer)
Usage:
<VZoomer style="width: 500px; height: 500px; border: solid 1px silver;">
<img
src="./assets/landscape-1.jpg"
style="object-fit: contain; width: 100%; height: 100%;"
>
</VZoomer>
API
<VZoomer> Props
-
aspectRatio: number
- Calculated aspect ratio of image (always width / height). Without this limits won't work properly, default is 1 (square); -
maxScale: number
- Maximum scale limit, default is 5; -
minScale: number
- Minimum scale limit, default is 1; -
zoomed: out boolean
- Whether zoomed in (scale equals to 1).out
means the prop is a child to parent one-way binding. So there must have a.sync
modifier. -
pivot: 'cursor' | 'image-center'
- The pivot when zoom the content, default iscursor
, can set to beimage-center
; -
zoomingElastic: boolean
- Whether to use the elastic effect when reaching the max/min zooming bounds, default istrue
; -
limitTranslation: boolean
- Whether to limit the content into the container, default istrue
; -
singleClickToZoom: boolean
- Whether to zoom in/out the content by single click, default istrue
; -
doubleClickToZoom: boolean
- Whether to zoom in/out the content by double click, default istrue
; -
mouseWheelToZoom: boolean
- Whether to zoom in/out the content by mouse wheel, default istrue
;
<VZoomer> Methods
-
reset()
- Reset the scale and translate to the initial state. -
zoomIn(scale=2)
- Zoom in. -
zoomOut(scale=0.5)
- Zoom out.
License
MIT