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>