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>