You can implement Zoom the image or other thing with mouse or touch using Vue.js
vue-zoomer
Zoom the image or other thing with mouse or touch
For Vue 3
This library has released a Vue 3 beta version here.
Usage
Install:
npm install vue-zoomer
Import:
import Vue from 'vue' import VueZoomer from 'vue-zoomer' Vue.use(VueZoomer)
Single usage:
<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;"> <img src="./assets/landscape-1.jpg" style="object-fit: contain; width: 100%; height: 100%;" > </v-zoomer>
Gallery usage:
<v-zoomer-gallery style="width: 100vw; height: 100vh;" :list="['a.jpg', 'b.jpg', 'c.jpg']" v-model="selIndex" ></v-zoomer-gallery>
API
<v-zoomer> Props
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
;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
;
<v-zoomer> Methods
reset()
– Reset the scale and translate to the initial state.zoomIn(scale=2)
– Zoom in.zoomOut(scale=0.5)
– Zoom out.
<v-zoomer-gallery> Props
list: Array<string> required
– Displaying image urls;v-model(value): number required
– Index of current showing image;pivot: 'cursor' | 'image-center'
– Same as above;zoomingElastic: boolean
– Same as above;limitTranslation: boolean
– Same as above;doubleClickToZoom: boolean
– Same as above;mouseWheelToZoom: boolean
– Same as above;
<v-zoomer-gallery> Methods
reset()
– Reset the scale and translate to the initial state.zoomIn(scale=2)
– Zoom in.zoomOut(scale=0.5)
– Zoom out.