English | 简体中文
- 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
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%
!
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 |
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. |
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 |
Consistent with Vue3
support