0.3.10 • Published 2 years ago
vue-zoomer v0.3.10
vue-zoomer @next for Vue 3
Zoom the image or other thing with mouse or touch
Usage (Vue 3 Differences)
Demo (built with Vite 2):
Install:
npm install vue-zoomer@next
Import:
import { createApp } from 'vue'
import VueZoomer from 'vue-zoomer'
const app = createApp(App)
app.use(VueZoomer)
app.mount('#app')
Usage ( Below are Vue 2)
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.
License
MIT
0.3.10
2 years ago
0.4.0-beta.2
2 years ago
0.4.0-beta.1
3 years ago
0.3.9
3 years ago
0.3.8
3 years ago
0.3.7
3 years ago
0.3.6
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago