vue3 拖拽插件 Vue3DraggableResizable

Vue3DraggableResizable 拖拽插件的官方文档

一、Vue3DraggableResizable 的属性和事件

1、Vue3DraggableResizable 的属性配置

2、Vue3DraggableResizable 的事件

二、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>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>