Vue3-based Vue scales and drags components according to mouse position.

English | 简体中文

Demo

Feature

Zoomable

• Support to zoom according to the mouse position when the wheel is scrolling, which can zoom in on a certain point.
• Support for mac touchpad scaling.

Draggable

• The components pan when the mouse wheel is scrolled, and the multi-directional translation effect can be carried out when mac uses the touchpad.
• The component can drag and drop when the left button is pressed.

Support for Typescript

Components are written in TypeScript, so they are naturally type-friendly.

Install

npm package

// npm
npm install vue-mouse-zoom

// yarn
yarn add vue-mouse-zoom

// pnpm
pnpm add vue-mouse-zoom

Example

<script setup lang="ts">
import { VueMouseZoom } from 'vue-mouse-zoom';
</script>

<template>
  <div style="width: 300px; height: 300px;">
    <VueMouseZoom>
      <img
        src="https://avatars.githubusercontent.com/u/68246760?v=4"
        style="width: 200px; height: 200px"
      />
    </VueMouseZoom>
  </div>
</template>

Notice 📢

Nodes wrapped by the VueMouseZoom component must specify width and height, and may not use variable width and height such as 100% !

Props

| props | Introduction | default | required | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------- | | zoom | The magnification of the component zoom, which is limited by the values of max- zoom and min- zoom when rendering for the first time | 1 | false | | min-zoom | Minimum magnification on first rendering | 0.05 | false | | max-zoom | The maximum scale of the first rendering | 4 | false | | is-center | Whether to center when rendering for the first time 中 | true | false | | is-draggable | Is dragging allowed? | true | false | | zoom-handle | The processing function when zooming, which returns a scale | (e: WheelEvent, preScale: number) => number | false |

Slot

| name | introduction | params | how to use | | ------- | -------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | default | The default slot of the component, and the content will be placed inside the component | isWheel: boolean | When there is a performance problem in the process of scaling and dragging a component, you can use this parameter to remove the dom optimization performance within the component. |

Event

| name | introduction | params | how to use | | -------------- | --------------------------------------------------- | ------------ | ------------------------------------------------------------- | | on-zoom-update | This event is triggered when the zoom ratio changes | scale:number | The current magnification can be obtained based on this event |

Browser compatibility

Consistent with Vue3 support