🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The vue-zoomer component enables the user to zoom the image or other things with mouse or touch.

Image

Documentation

vue-zoomer

Zoom the image or other thing with mouse or touch

Demo

Usage

Install:

npm install vue-zoomer 

Import:

import Vue from 'vue' import VueZoomer from 'vue-zoomer' import 'vue-zoomer/dist/vue-zoomer.css'  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

out means the prop is a child -> parent one-way binding. So there must have a .sync modifier.

<v-zoomer> Props

  • maxScale: number - Maximum scale limit, default is 1;
  • minScale: number - Minimum scale limit, default is 5;
  • zoomed: out boolean - Whether zoomed in (scale equals to 1);
  • pivot: 'cursor' | 'image-center' - The pivot when zoom the content, default is cursor, can set to be image-center;
  • limitTranslation: boolean - Whether to limit the content into the container, default is true;

<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' - The pivot when zoom the image, default is cursor, can set to be image-center;
  • limitTranslation: boolean - Whether to limit the image into the container, default is true;

License

MIT


You May Also Like