vue3 拖拽插件 Vue3DraggableResizable

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

属性	类型	默认值	功能描述	示例
initW	Number	null	设置初始宽度（px）	<Vue3DraggableResizable :initW=“100” />
initH	Number	null	设置初始高度（px）	<Vue3DraggableResizable :initH=“100” />
w	Number	0	组件的当前宽度（px），你可以使用“v-model:w”语法使它和父组件保持一致	<Vue3DraggableResizable v-model:w=“100” />
h	Number	0	组件的当前高度（px），你可以使用“v-model:h”语法使它和父组件保持一致	<Vue3DraggableResizable v-model:h=“100” />
x	Number	0	组件距离父容器的左侧的距离（px），你可以使用“v-model:x”语法使它和父组件保持一致	<Vue3DraggableResizable v-model:x=“100” />
y	Number	0	组件距离父容器的右侧的距离（px），你可以使用“v-model:y”语法使它和父组件保持一致	<Vue3DraggableResizable v-model:y=“100” />
minW	Number	20	组件的最小宽度（px）	<Vue3DraggableResizable :minW=“100” />
minH	Number	20	组件的最小高度（px）	<Vue3DraggableResizable :minH=“100” />
active	Boolean	false	组件当前是否处于活跃状态，你可以使用“v-model:active”语法使它和父组件保持一致	<Vue3DraggableResizable v-model:active=“true” />
draggable	Boolean	true	组件是否可拖动	<Vue3DraggableResizable :draggable=“false” />
resizable	Boolean	true	组件是否可调整大小	<Vue3DraggableResizable :resizable=“false” />
lockAspectRatio	Boolean	false	该属性用来设置是否锁定比例	<Vue3DraggableResizable :lockAspectRatio=“true” />
disabledX	Boolean	false	是否禁止组件在 X 轴上移动	<Vue3DraggableResizable :disabledX=“true” />
disabledY	Boolean	false	是否禁止组件在 Y 轴上移动	<Vue3DraggableResizable :disabledY=“true” />
disabledW	Boolean	false	是否禁止组件修改宽度	<Vue3DraggableResizable :disabledW=“true” />
disabledH	Boolean	false	是否禁止组件修改高度	<Vue3DraggableResizable :disabledH=“true” />
parent	Boolean	false	是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭	<Vue3DraggableResizable :parent=“true” />
handles	Array	[‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’]	定义缩放的句柄（共八个方向）: tl : 上左 tm : 上中 tr : 上右 mr : 中左 ml : 中右 bl : 下左 bm : 下中 br : 下右	<Vue3DraggableResizable :handles=“[‘tl’,‘tr’,‘bl’,‘br’]” />
classNameDraggable	String	‘draggable’	自定义组件的类名，该类名在组件是“可拖动”时显示	<Vue3DraggableResizable classNameDraggable=“draggable” />
classNameResizable	String	‘resizable’	自定义组件类名，该类名在组件是“可缩放”时显示	<Vue3DraggableResizable classNameResizable=“resizable” />
classNameDragging	String	‘dragging’	定义组件在拖动时显示的类名	<Vue3DraggableResizable classNameDragging=“dragging” />
classNameResizing	String	‘resizing’	定义组件在缩放时显示的类名	<Vue3DraggableResizable classNameResizing=“resizing” />
classNameActive	String	‘active’	定义组件在活跃状态下的类名	<Vue3DraggableResizable classNameActive=“active” />
classNameHandle	String	‘handle’	定义缩放句柄的类名	<Vue3DraggableResizable classNameHandle=“my-handle” />
classNameHandle	String	‘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>