vue3实现图片缩放拖拽功能的示例代码

 更新时间:2024年04月29日 08:47:48   作者:嚣张农民  
v3-drag-zoom 是基于 vue3 开发的一个缩放拖拽组件,方便开发者快速实现缩放拖拽功能,效果类似地图的缩放与拖拽,本文给大家介绍了vue3如何快速实现图片缩放拖拽功能,感兴趣的朋友可以参考下

前言

因为需要实现图片拖拽,缩放的功能,项目是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

参数名类型默认值说明
alignStringcontain内容对齐方式,可选值有 auto、 containcover
autoResizeBooleantrue是否自动重置尺寸,当容器尺寸为百分比的时候,会根据父容器变化而自动变化
followPointerBooleantrue缩放时是否跟随鼠标
maxZoomFloat100最大缩放倍数
minZoomFloat0.01最小缩放倍数
zoomFactorFloat0.1鼠标滚轮一次的缩放比例
loadingBooleanfalse是否加载中
animateDurationNumber200缩放时候的过度动画时长,单位 ms

Slots

Slot说明
default直接填写需要放置的内容

Exposed

参数名类型说明
zoom(zoom:Float) => void手动缩放 zoom: 为缩放倍数
reset() => void重置缩放

v3-drag-zoom-item

Props

参数名类型默认值是否必须说明
offsetArray[-50,-50]偏移量,默认值代表横向和纵向均偏移 -50%,也就是对齐中心点位置,偏移量单位为 %, 不支持 px
fixedSizeBooleanfalse是否固定大小, true代表在缩放过程中该item内容尺寸不变
rotateFloat0旋转角度单位 deg (360度)
draggableBooleanfalse是否可以拖拽移动
position(v-model)CurPosition该 item 在内容中的位置(百分比位置)

Slots

Slot说明
default直接填写需要放置的内容

Events

事件名参数说明
onMove( pos :Position)=> void每移动一点距离触发,返回当前位置
onMoveFinished( pos :Position)=> void移动结束(鼠标抬起或超出范围)触发, 返回当前位置

CurPosition

参数名类型默认值是否必须说明
xFloat横向位置 %
yFloat纵向位置 %

Position extend CurPosition

参数名类型默认值是否必须说明
xFloat横向位置 %
yFloat纵向位置 %
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图片缩放拖拽的资料请关注脚本之家其它相关文章!

相关文章

  • Vue服务端渲染实践之Web应用首屏耗时最优化方案

    Vue服务端渲染实践之Web应用首屏耗时最优化方案

    这篇文章主要介绍了Vue服务端渲染实践之Web应用首屏耗时最优化方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue3 + CSS实现一个喷火龙动画效果

    Vue3 + CSS实现一个喷火龙动画效果

    不知不觉中,2023年已然逝去了,龙年到了,所以本文小编使用Vue3 + CSS实现一个喷火龙的动画效果,文中有相关的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手尝试一下
    2024-02-02
  • VUE识别访问设备是pc端还是移动端的实现步骤

    VUE识别访问设备是pc端还是移动端的实现步骤

    经常在项目中会有支持pc与手机端需求,并且pc与手机端是两个不一样的页面,这时就要求判断设置,下面这篇文章主要给大家介绍了关于VUE识别访问设备是pc端还是移动端的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue首屏时间指标采集最佳方式详解

    Vue首屏时间指标采集最佳方式详解

    这篇文章主要为大家介绍了Vue首屏时间指标采集最佳方式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决

    vue在install时node-sass@4.14.1 postinstall:node scripts/buil

    最近在npm install 的时候遇到了个问题,所以给大家总结下,下面这篇文章主要给大家介绍了关于vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误的解决方法,需要的朋友可以参考下
    2023-05-05
  • Element InputNumber 计数器的实现示例

    Element InputNumber 计数器的实现示例

    这篇文章主要介绍了Element InputNumber 计数器的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Vue2迁移Rsbuild详细步骤

    Vue2迁移Rsbuild详细步骤

    Rsbuild,一个基于Rspack的高效Web构建工具,将Rspack的强大功能与易用性相结合,是你项目搭建的不二之选,Rsbuild不仅提供了开箱即用的体验,还引入了高性能的构建机制,本文给大家介绍了Vue2迁移Rsbuild详细步骤,需要的朋友可以参考下
    2024-10-10
  • Vue 打包后相对路径的引用问题

    Vue 打包后相对路径的引用问题

    这篇文章主要介绍了VUE 打包后相对路径的引用问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中setup语法糖写法实例

    vue中setup语法糖写法实例

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解vue中配置代理(解决跨域请求)

    详解vue中配置代理(解决跨域请求)

    这篇文章主要为大家详细介绍了vue如何通过配置代理来解决跨域请求的问题,文中的示例代码讲解详细,对我们深入学习vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08

最新评论