vue3 拖拽插件 Vue3DraggableResizable

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

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

2、Vue3DraggableResizable 的事件

事件	入参	触发时机	功能描述	示例
activated	-	组件从非活跃状态到活跃状态时触发	-
deactivated	-	组件从活跃状态到非活跃状态时触发	-
drag-start	{ x: number, y: number }	组件开始拖动时触发	-
dragging	{ x: number, y: number }	组件在拖动过程中持续触发	-
drag-end	{ x: number, y: number }	组件拖动结束时触发	-
resize-start	{ x: number, y: number, w: number, h: number }	组件开始缩放时触发	-
resizing	{ x: number, y: number, w: number, h: number }	组件在缩放过程中持续触发	-
resize-end	{ x: number, y: number, w: number, h: number }	组件缩放结束时触发	-

二、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>
	
    <Vue3DraggableResizable
        v-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>Testdiv>
    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>