快捷導(dǎo)航

vue3實現(xiàn)圖片縮放拖拽功能的示例代碼

更新時間：2024年04月29日 08:47:48 作者：囂張農(nóng)民

v3-drag-zoom 是基于 vue3 開發(fā)的一個縮放拖拽組件,方便開發(fā)者快速實現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下

前言

因為需要實現(xiàn)圖片拖拽，縮放的功能，項目是vue3的所以找到這個組件，很簡潔，api文檔描述的也清楚，能夠快速3分鐘內(nèi)搞完一個功能

縮放拖拽組件(v3-drag-zoom)

v3-drag-zoom 是基于 vue3 開發(fā)的一個縮放拖拽組件，方便開發(fā)者快速實現(xiàn)縮放拖拽功能。

效果類似地圖的縮放與拖拽，但是不同的是，v3-drag-zoom 可以縮放任意元素，而不僅僅是地圖。

使用場景：

地圖縮放與拖拽
圖片縮放與拖拽
任意元素縮放與拖拽
其他任意需要縮放與拖拽的場景

安裝?

使用以下命令安裝 v3-drag-zoom：

bash

npm install v3-drag-zoom
# 或
yarn add v3-drag-zoom

導(dǎo)入組件?

全局導(dǎo)入?

在 main.js 中全局引入 v3-drag-zoom：

import {createApp} from "vue";
import App from "./App.vue";
// v3-drag-zoom 組件
import V3DragZoom from "v3-drag-zoom";
// v3-drag-zoom 全局樣式（必須導(dǎo)入，否則無法正常使用）
import "v3-drag-zoom/dist/style.css";

createApp(App).use(V3DragZoom).mount("#app");

按需導(dǎo)入?

在需要的組件中導(dǎo)入 v3-drag-zoom：

<script setup lang="ts">
  import {V3DragZoomContainer} from "v3-drag-zoom";
</script>

<template>
  <v3-drag-zoom-container>
    <div>需要縮放與拖拽的元素</div>
  </v3-drag-zoom-container>
</template>

由于v3-drag-zoom 全局導(dǎo)入也就只有 2 個組件，因此建議全局導(dǎo)入。

基本使用?

使用 v3-drag-zoom 組件包裹需要縮放與拖拽的元素即可。

如果 v3-drag-zoom 內(nèi)部存在 img 元素，則會自動等待所有元素加載完畢后初始化，因此不需要手動等待圖片加載完畢后再初始化。

<script setup lang="ts"></script>

<template>
  <v3-drag-zoom-container style="width: 600px; height: 400px; background-color: #ccc">
    <div
      class="flex-column flex-same"
      style="background-color: darkred; height: 500px; width: 900px"
    >
      <div class="flex-grow flex-horiz flex-same" v-for="i in 10">
        <div class="border-box bca-border" v-for="i in 10"></div>
      </div>
    </div>
  </v3-drag-zoom-container>
</template>

API參數(shù)?

v3-drag-zoom-container?

Props?

參數(shù)名	類型	默認值	說明
align	String	contain	內(nèi)容對齊方式，可選值有 `auto`、 `contain`、`cover`
autoResize	Boolean	true	是否自動重置尺寸，當容器尺寸為百分比的時候，會根據(jù)父容器變化而自動變化
followPointer	Boolean	true	縮放時是否跟隨鼠標
maxZoom	Float	100	最大縮放倍數(shù)
minZoom	Float	0.01	最小縮放倍數(shù)
zoomFactor	Float	0.1	鼠標滾輪一次的縮放比例
loading	Boolean	false	是否加載中
animateDuration	Number	200	縮放時候的過度動畫時長，單位 ms

Slots?

Slot	說明
default	直接填寫需要放置的內(nèi)容

Exposed?

參數(shù)名	類型	說明
zoom	(zoom:Float) => void	手動縮放 zoom: 為縮放倍數(shù)
reset	() => void	重置縮放

v3-drag-zoom-item?

Props?

參數(shù)名	類型	默認值	是否必須	說明
offset	Array	[-50,-50]	否	偏移量，默認值代表橫向和縱向均偏移 -50%，也就是對齊中心點位置，偏移量單位為 %, 不支持 px
fixedSize	Boolean	false	否	是否固定大小， true代表在縮放過程中該item內(nèi)容尺寸不變
rotate	Float	0	否	旋轉(zhuǎn)角度單位 deg (360度）
draggable	Boolean	false	否	是否可以拖拽移動
position(v-model)	CurPosition	無	是	該 item 在內(nèi)容中的位置（百分比位置）

Slots?

Slot	說明
default	直接填寫需要放置的內(nèi)容

Events?

事件名	參數(shù)	說明
onMove	( pos :Position)=> void	每移動一點距離觸發(fā)，返回當前位置
onMoveFinished	( pos :Position)=> void	移動結(jié)束（鼠標抬起或超出范圍）觸發(fā)，返回當前位置

CurPosition?

參數(shù)名	類型	默認值	是否必須	說明
x	Float	無	是	橫向位置 %
y	Float	無	是	縱向位置 %

Position extend CurPosition?

參數(shù)名	類型	默認值	是否必須	說明
x	Float	無	是	橫向位置 %
y	Float	無	是	縱向位置 %
sub	(pos:Position)=>Position	無	否	計算當前 Position 與 pos 之間的差值 new Position(this.x - pos.x, this.y - pos.y);
add	(pos:Position)=>Position	無	否	計算當前 Position 與 pos 之間的和值 new Position(this.x + pos.x, this.y + p