我要评论前言
因为需要实现图片拖拽，缩放的功能，项目是vue3的所以找到这个组件，很简洁，api文档描述的也清楚，能够快速3分钟内搞完一个功能
缩放拖拽组件(v3-drag-zoom)
v3-drag-zoom 是基于 vue3 开发的一个缩放拖拽组件，方便开发者快速实现缩放拖拽功能。
效果类似地图的缩放与拖拽，但是不同的是，v3-drag-zoom 可以缩放任意元素，而不仅仅是地图。
使用场景：
- 地图缩放与拖拽
- 图片缩放与拖拽
- 任意元素缩放与拖拽
- 其他任意需要缩放与拖拽的场景
安装
使用以下命令安装 v3-drag-zoom：
bash
npm install v3-drag-zoom # 或 yarn add v3-drag-zoom
导入组件
全局导入
在 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 全局样式（必须导入，否则无法正常使用）
import "v3-drag-zoom/dist/style.css";
createapp(app).use(v3dragzoom).mount("#app");
按需导入
在需要的组件中导入 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 全局导入也就只有 2 个组件，因此建议全局导入。
基本使用
使用 v3-drag-zoom 组件包裹需要缩放与拖拽的元素即可。
如果 v3-drag-zoom 内部存在 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参数
v3-drag-zoom-container
props
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| align | string | contain | 内容对齐方式，可选值有 auto、 contain、cover |
| autoresize | boolean | true | 是否自动重置尺寸，当容器尺寸为百分比的时候，会根据父容器变化而自动变化 |
| followpointer | boolean | true | 缩放时是否跟随鼠标 |
| maxzoom | float | 100 | 最大缩放倍数 |
| minzoom | float | 0.01 | 最小缩放倍数 |
| zoomfactor | float | 0.1 | 鼠标滚轮一次的缩放比例 |
| loading | boolean | false | 是否加载中 |
| animateduration | number | 200 | 缩放时候的过度动画时长，单位 ms |
slots
| slot | 说明 |
|---|---|
| default | 直接填写需要放置的内容 |
exposed
| 参数名 | 类型 | 说明 |
|---|---|---|
| zoom | (zoom:float) => void | 手动缩放 zoom: 为缩放倍数 |
| reset | () => void | 重置缩放 |
v3-drag-zoom-item
props
| 参数名 | 类型 | 默认值 | 是否必须 | 说明 |
|---|---|---|---|---|
| offset | array | [-50,-50] | 否 | 偏移量，默认值代表横向和纵向均偏移 -50%，也就是对齐中心点位置，偏移量单位为 %, 不支持 px |
| fixedsize | boolean | false | 否 | 是否固定大小， true代表在缩放过程中该item内容尺寸不变 |
| rotate | float | 0 | 否 | 旋转角度单位 deg (360度） |
| draggable | boolean | false | 否 | 是否可以拖拽移动 |
| position(v-model) | curposition | 无 | 是 | 该 item 在内容中的位置（百分比位置） |
slots
| slot | 说明 |
|---|---|
| default | 直接填写需要放置的内容 |
events
| 事件名 | 参数 | 说明 |
|---|---|---|
| onmove | ( pos :position)=> void | 每移动一点距离触发，返回当前位置 |
| onmovefinished | ( pos :position)=> void | 移动结束（鼠标抬起或超出范围）触发， 返回当前位置 |
curposition
| 参数名 | 类型 | 默认值 | 是否必须 | 说明 |
|---|---|---|---|---|
| x | float | 无 | 是 | 横向位置 % |
| y | float | 无 | 是 | 纵向位置 % |
position extend curposition
| 参数名 | 类型 | 默认值 | 是否必须 | 说明 |
|---|---|---|---|---|
| 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 |
以上就是vue3实现图片缩放拖拽功能的示例代码的详细内容，更多关于vue3图片缩放拖拽的资料请关注代码网其它相关文章！
发表评论