Vue3引入vue-drag-resize拖拽库 实现对dom的拖拽和拉伸、渲染

源码&文档 vue-drag-resize

示例 Vue-drag-resize (kirillmurashov.com)

示例

1. 安装

pnpm install vue-drag-resize

2. 引入

直接在所需组件中引入即可  无需全局引入  但 Vue2和 Vue3引入方式略有不同

Vue2

import VueDragResize from 'vue-drag-resize'

Vue3（/src）

import VueDragResize from 'vue-drag-resize/src'

3. 使用

注意 我的示例代码中并没有用容器包裹组件  在实际应用当中应用容器包裹组件 并给该容器设置绝对定位！！

position: relative;

<VueDragResize
    :isActive="false"
    :parentLimitation="false"
    :w="200"
    :h="100"
    :x="20"
    :y="30"
    :minw="20"
    :minh="20"
    @resizestop="handleResizeStop($event, item)"
    @dragstop="handleResizeStop($event, item)"
>
    <div>这是可拖动元素</div>
</VueDragResize>



// 停止拖动
const handleResizeStop = (e) => {
  console.log(e)
}

isActive ：激活状态 激活后会显示拖拽和拉伸框 点击后默认激活  故初始设置为false

parentLimitation：是否超出父元素  这里选择否  如需禁止超出等功能  需选是

w h x y ：四个属性分别对行当前元素的宽 高 x轴和y轴

minw：拉伸大小时 最低宽度 默认为50 最低为1 不可为0

minh：拉伸大小时 最低高度 默认为50 最低为1 不可为0

resizestop：停止拉伸事件

dragstop：停止拖拽事件

4. 注意

拉伸 拖拽 停止拉伸 停止拖拽的事件回调均相同

之所以用停止事件进行操作  是因为拖拽触发频率过高  在拖拽函数中处理逻辑会影响性能

VueDragResize组件引入需要给一个容器 容器设置绝对定位！！