记录一次实现组件拖拽缩放的功能

1.先安装

npm i vue3-draggable-resizable --save

2.main.js中全局引入

import Vue3DraggableResizable from "vue3-draggable-resizable";

import "vue3-draggable-resizable/dist/vue3DraggableResizable.css";

3.如果需要局部使用 在组件内单独引入样式文件

import Vue3DraggableResizable from "vue3-draggable-resizable";

import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";

4.使用(实现缩放拖拽可能会用到的事件)

@activated="print('活动')"      

@deactivated="print('停止')"      

@drag-start="print('拖动启动')"      

@resize-start="print('开始调整大小')"      

@dragging="print('正在拖拽')"      

@resizing="print('正在调整大小')"      

@drag-end="print('拖动结束')"      

@resize-end="print('调整大小结束')"

5.在页面上的具体的应用

 <Vue3DraggableResizable    

:draggable="store.state.draggable.isDraggable"    //控制是否能拖拽 写在store中

:x="draggableData.clientX"    //这些参数都是从数据库获取的

:y="draggableData.clientY"    

:initH="draggableData.initHeight"    

:initW="draggableData.initWidth"    

:w="draggableData.initWidth"    

:h="draggableData.initHeight"    

@resize-end="resizeEndHandle"    

@drag-end="dragEndHandler"    

v-show="alarmInfos.length > 0"   >

        里面可以放任何元素

</Vue3DraggableResizable>