• 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.

• 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.

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

npm package

// npm
npm install vue-mouse-zoom

// yarn
yarn add vue-mouse-zoom

// pnpm
pnpm add vue-mouse-zoom

<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>

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

Consistent with Vue3 support