Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Zoom the image or other thing with mouse or touch using vue.js

Posted on December 4, 2021December 4, 2021 By christo No Comments on Zoom the image or other thing with mouse or touch using vue.js

You can implement Zoom the image or other thing with mouse or touch using Vue.js

Table of Contents

  • vue-zoomer
    • For Vue 3
    • Usage
    • API
      • <v-zoomer> Props
      • <v-zoomer> Methods
      • <v-zoomer-gallery> Props
      • <v-zoomer-gallery> Methods

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 is cursor, can set to be image-center;
  • zoomingElastic: boolean – Whether to use the elastic effect when reaching the max/min zooming bounds, default is true;
  • limitTranslation: boolean – Whether to limit the content into the container, default is true;
  • doubleClickToZoom: boolean – Whether to zoom in/out the content by double click, default is true;
  • mouseWheelToZoom: boolean – Whether to zoom in/out the content by mouse wheel, default is true;

<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.
Demo
Full project
vue.js Tags:vue.js

Post navigation

Previous Post: Popover component using popper.js for Vue.js apps
Next Post: An advanced and flexible Vue.js 2.x component for displaying data tables

Related Posts

vue inner image zoom vue.js
Vue JSON to CSV file vue.js
Vue.js form validation vee-validate library vue.js
Vue.js component to select the time intervals of the day vue.js
flip countdown timer component using Vue.js vue.js
material vue.js date range picker vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech