快捷導(dǎo)航

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

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

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

前言

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

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

v3-drag-zoom 是基于 vue3 開發(fā)的一個(gè)縮放拖拽組件，方便開發(fā)者快速實(shí)現(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 個(gè)組件，因此建議全局導(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ù)名	類型	默認(rèn)值	說明
align	String	contain	內(nèi)容對齊方式，可選值有 `auto`、 `contain`、`cover`
autoResize	Boolean	true	是否自動重置尺寸，當(dāng)容器尺寸為百分比的時(shí)候，會根據(jù)父容器變化而自動變化
followPointer	Boolean	true	縮放時(shí)是否跟隨鼠標(biāo)
maxZoom	Float	100	最大縮放倍數(shù)
minZoom	Float	0.01	最小縮放倍數(shù)
zoomFactor	Float	0.1	鼠標(biāo)滾輪一次的縮放比例
loading	Boolean	false	是否加載中
animateDuration	Number	200	縮放時(shí)候的過度動畫時(shí)長，單位 ms

Slots?

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

Exposed?

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

v3-drag-zoom-item?

Props?

參數(shù)名	類型	默認(rèn)值	是否必須	說明
offset	Array	[-50,-50]	否	偏移量，默認(rèn)值代表橫向和縱向均偏移 -50%，也就是對齊中心點(diǎn)位置，偏移量單位為 %, 不支持 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	每移動一點(diǎn)距離觸發(fā)，返回當(dāng)前位置
onMoveFinished	( pos :Position)=> void	移動結(jié)束（鼠標(biāo)抬起或超出范圍）觸發(fā)，返回當(dāng)前位置

CurPosition?

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

Position extend CurPosition?

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