vue3 拖拽插件 Vue3DraggableResizable

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

属性类型默认值功能描述示例
initWNumbernull设置初始宽度(px)<Vue3DraggableResizable :initW=“100” />
initHNumbernull设置初始高度(px)<Vue3DraggableResizable :initH=“100” />
wNumber0组件的当前宽度(px),你可以使用“v-model:w”语法使它和父组件保持一致<Vue3DraggableResizable v-model:w=“100” />
hNumber0组件的当前高度(px),你可以使用“v-model:h”语法使它和父组件保持一致<Vue3DraggableResizable v-model:h=“100” />
xNumber0组件距离父容器的左侧的距离(px),你可以使用“v-model:x”语法使它和父组件保持一致<Vue3DraggableResizable v-model:x=“100” />
yNumber0组件距离父容器的右侧的距离(px),你可以使用“v-model:y”语法使它和父组件保持一致<Vue3DraggableResizable v-model:y=“100” />
minWNumber20组件的最小宽度(px)<Vue3DraggableResizable :minW=“100” />
minHNumber20组件的最小高度(px)<Vue3DraggableResizable :minH=“100” />
activeBooleanfalse组件当前是否处于活跃状态,你可以使用“v-model:active”语法使它和父组件保持一致<Vue3DraggableResizable v-model:active=“true” />
draggableBooleantrue组件是否可拖动<Vue3DraggableResizable :draggable=“false” />
resizableBooleantrue组件是否可调整大小<Vue3DraggableResizable :resizable=“false” />
lockAspectRatioBooleanfalse该属性用来设置是否锁定比例<Vue3DraggableResizable :lockAspectRatio=“true” />
disabledXBooleanfalse是否禁止组件在 X 轴上移动<Vue3DraggableResizable :disabledX=“true” />
disabledYBooleanfalse是否禁止组件在 Y 轴上移动<Vue3DraggableResizable :disabledY=“true” />
disabledWBooleanfalse是否禁止组件修改宽度<Vue3DraggableResizable :disabledW=“true” />
disabledHBooleanfalse是否禁止组件修改高度<Vue3DraggableResizable :disabledH=“true” />
parentBooleanfalse是否将组件的拖动和缩放限制在其父节点内,即组件不会超出父节点,默认关闭<Vue3DraggableResizable :parent=“true” />
handlesArray[‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’]定义缩放的句柄(共八个方向):
tl : 上左
tm : 上中
tr : 上右
mr : 中左
ml : 中右
bl : 下左
bm : 下中
br : 下右
<Vue3DraggableResizable :handles=“[‘tl’,‘tr’,‘bl’,‘br’]” />
classNameDraggableString‘draggable’自定义组件的类名,该类名在组件是“可拖动”时显示<Vue3DraggableResizable classNameDraggable=“draggable” />
classNameResizableString‘resizable’自定义组件类名,该类名在组件是“可缩放”时显示<Vue3DraggableResizable classNameResizable=“resizable” />
classNameDraggingString‘dragging’定义组件在拖动时显示的类名<Vue3DraggableResizable classNameDragging=“dragging” />
classNameResizingString‘resizing’定义组件在缩放时显示的类名<Vue3DraggableResizable classNameResizing=“resizing” />
classNameActiveString‘active’定义组件在活跃状态下的类名<Vue3DraggableResizable classNameActive=“active” />
classNameHandleString‘handle’定义缩放句柄的类名<Vue3DraggableResizable classNameHandle=“my-handle” />
classNameHandleString‘handle’定义缩放句柄的类名<Vue3DraggableResizable classNameHandle=“my-handle” />

2、Vue3DraggableResizable 的事件

事件入参触发时机功能描述示例
activated-组件从非活跃状态到活跃状态时触发-<Vue3DraggableResizable @activated=“activatedHandle”/>
deactivated-组件从活跃状态到非活跃状态时触发-<Vue3DraggableResizable @deactivated=“deactivatedHandle”/>
drag-start{ x: number, y: number }组件开始拖动时触发-<Vue3DraggableResizable @drag-start=“dragStartHandle”/>
dragging{ x: number, y: number }组件在拖动过程中持续触发-<Vue3DraggableResizable @dragging=“draggingHandle”/>
drag-end{ x: number, y: number }组件拖动结束时触发-<Vue3DraggableResizable @drag-end=“dragEndHandle”/>
resize-start{ x: number, y: number, w: number, h: number }组件开始缩放时触发-<Vue3DraggableResizable @resize-start=“resizeStartHandle” />
resizing{ x: number, y: number, w: number, h: number }组件在缩放过程中持续触发-<Vue3DraggableResizable @resizing=“resizingHandle” />
resize-end{ x: number, y: number, w: number, h: number }组件缩放结束时触发-<Vue3DraggableResizable @resize-end=“resizeEndHandle” />

二、Vue3DraggableResizable 的使用案例

以 vue3 项目为例,看看 Vue3DraggableResizable 的用法:

首先,在 main.ts 中引入 Vue3DraggableResizable,并将其挂在到vue实例上:

// 引入拖拽库
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'// Vue 实例
const app = createApp(App)
app.use(Vue3DraggableResizable)

然后在组件中的使用如下:

<template><!-- 拖拽组件 --><Vue3DraggableResizablev-if="isShowMapToolBar"classNameDraggable="draggable":initW="70":initH="30"v-model:x="dragData.x"v-model:y="dragData.y"v-model:w="dragData.w"v-model:h="dragData.h"v-model:active="dragData.active":draggable="true":resizable="true":parent="true"@activated="print('activated')"@deactivated="print('deactivated')"@drag-start="print('drag-start')"@resize-start="print('resize-start')"@dragging="print('dragging')"@resizing="print('resizing')"@drag-end="print('drag-end')"@resize-end="print('resize-end')"><div>Test</div></Vue3DraggableResizable>
</template>
<script setup lang="ts">
// 拖拽的配置
const dragData = reactive({x: 10,y: 10,h: 100,w: 100,active: false,
});
// 拖拽的事件
const print = (val) => {console.log(val)
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql高级教程-索引

文章目录 架构简介1.连接层2.服务层3.引擎层4.存储层 索引优化背景目的劣势分类基本语法索引结构和适用场景 性能分析MySq| Query Optimizerexplain 索引优化单表优化两表优化三表优化 索引失效原因 架构简介 1.连接层 最上层是一些客户端和连接服务&#xff0c;包含本地sock通…

1 Go的前世今生

概述 Go语言正式发布于2009年11月&#xff0c;由Google主导开发。它是一种针对多处理器系统应用程序的编程语言&#xff0c;被设计成一种系统级语言&#xff0c;具有非常强大和有用的特性。Go语言的程序速度可以与C、C相媲美&#xff0c;同时更加安全&#xff0c;支持并行进程。…

[架构之路-241]:目标系统 - 纵向分层 - 企业信息化与企业信息系统(多台企业应用单机组成的企业信息网络)

目录 前言&#xff1a; 一、什么是信息系统&#xff1a;计算机软件硬件系统 1.1 什么是信息 1.2 什么是信息系统 1.3 什么是信息技术 1.4 什么是信息化与信息化转型 1.5 什么是数字化与数字化转型&#xff08;信息化的前提&#xff09; 1.6 数字化与信息化的比较 1.7 …

力扣每日一题58:最后一个单词的长度

题目描述&#xff1a; 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1&#xff1a; 输入&#xff1a;s "Hello World&q…

Arduino IDE + Esp32 Cam + 实现视频流 + 开发环境部署

1、开发环境 Arduino ide 版本&#xff1a;2.2.1 esp32工具&#xff1a;2.0.5 示例代码 #include "esp_camera.h" #include <WiFi.h>// // WARNING!!! PSRAM IC required for UXGA resolution and high JPEG quality // Ensure ESP32 Wrover Modu…

Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构、部署实例

Zookeeper、Kafka集群与FilebeatKafkaELK架构、部署实例 一、Zookeeper1.1、Zookeeper 定义1.2、Zookeeper 工作机制1.3、Zookeeper 特点1.4、Zookeeper 数据结构1.5、Zookeeper 应用场景1.5、Zookeeper 选举机制1.5.1、 第一次启动选举机制1.5.2、 非第一次启动选举机制 二、Z…

二、UI入门

1. QWidget类 QWidget类是Qt所有图形用户界面&#xff08;组件&#xff09;的基类&#xff0c;因此QWidget类内部规定了所有最基础的UI相关功能。例如以下成员&#xff1a; ● width : const int 宽度&#xff08;单位&#xff1a;像素&#xff0c;后文同&#xff09; Qt中的…

优先级总结

目录 越小越优先 1.路由协议 2.路由开销 3.STP 4.Ethernet-trunk&#xff08;LACP&#xff09; 越大越优先 1.VRRP 2.Router-id 3.DR/BDR 越小越优先 1.路由协议 取值范围&#xff1a;0~255 直连路由0 静态路由/默认路由60 RIP路由100 OSPF路由10或150 BGP路由255 2…

数据结构-树的概念结构及存储

&#x1f5e1;CSDN主页&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;代码云仓库&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;文章栏目&#xff1a;数据结构专栏&#x1f5e1; 目录 一、树的基本概念及结构 1树的概念 2树的存储 二、二叉树的概念及结构 1二叉树的概…

2023-python pdf转换为PPT代码

from pdf2image import convert_from_path from pptx import Presentation from pptx.util import Inches import os# 用户输入PDF文件路径 pdf_file_path input("请输入PDF文件的路径&#xff1a;")# 提取文件名&#xff08;不包括扩展名&#xff09;作为PPT文件名…

vue3结合Cesium加载倾斜摄影3dtiles

这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异&#xff0c;为此将解决方法做一个记录&#xff0c;便于其他读者使用。 加载倾斜摄影3dtitle //加载倾斜摄影图像 function init3Dtiles() {const tileSet new Cesium3DTileset({url: "http://1…

互联网Java工程师面试题·Java 面试篇·第五弹

目录 79、适配器模式和装饰器模式有什么区别&#xff1f; 80、适配器模式和代理模式之前有什么不同&#xff1f; 81、什么是模板方法模式&#xff1f; 82、什么时候使用访问者模式&#xff1f; 83、什么时候使用组合模式&#xff1f; 84、继承和组合之间有什么不同&#…

软考 系统架构设计师系列知识点之基于架构的软件开发方法ABSD(3)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之基于架构的软件开发方法ABSD&#xff08;2&#xff09; 所属章节&#xff1a; 第7章. 系统架构设计基础知识 第2节. 基于架构的软件开发方法 5. 体系结构设计 体系结构设计需求用来激发和调整设计决策&#xff0c;不…

SpringMVC获取请求参数

文章目录 1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、RequestParam4、RequestHeader5、CookieValue6、通过POJO获取请求参数7、解决获取请求参数的乱码问题 1、通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参&#xff0c;此时HttpServletReq…

Java--Object类

Java中Object类是所有类的父类&#xff0c;是Java中最高层的类。用户创建一个类时&#xff0c;除非指定继承了某个类&#xff0c;否则都是继承于Object类。 由于所有类都继承于Object类&#xff0c;所以所有类都可以重写Object类中的方法。但是Object类中被final修饰的getClass…

改进YOLO系列 | YOLOv5/v7 引入 Dynamic Snake Convolution | 动态蛇形卷积

准确分割拓扑管状结构,如血管和道路,在各个领域中至关重要,可以确保下游任务的准确性和效率。然而,许多因素使任务复杂化,包括细小的局部结构和可变的全局形态。在这项工作中,我们注意到管状结构的特殊性,并利用这一知识来引导我们的DSCNet,以在三个阶段同时增强感知:…

【CSS】常见 CSS 布局

1. 响应式布局 <!DOCTYPE html> <html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: …

论文导读|9月MSOM文章精选:智慧城市运筹

推文作者&#xff1a;郭浩然 编者按 本期论文导读围绕“智慧城市运筹”这一话题&#xff0c;简要介绍并分析了近期的三篇MSOM文章&#xff0c;分别涉及了最后一公里配送中的新模式&#xff1a;“司机辅助”&#xff0c;易腐库存管理的新策略&#xff1a;“截断平衡”&#xff0…

[H5动画制作系列]雪花随机产生飘落

雪花图片参考: 全局代码: var max120; var index0; 第一帧代码: index; if(index<max){posX550*Math.random();posY220*Math.random()-100;scale0.8*Math.random()0.2;var snowflakenew lib.snowlink();snowflake.xposX;snowflake.yposY;snowflake.scaleXscale;snowflake…

ES6有何新特性?

目录 介绍 let 和 const 解构 模板字符串 箭头函数 Set Map 介绍 ES 全称是ECMAScript&#xff0c;它是JavaScript基础构建的一种语言&#xff0c;JavaScript正是建立在ECMAScript语言的基础规范中建立使用的。ES6实际上是一个泛指&#xff0c;泛指ES2015及后续的版本…