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组件引入需要给一个容器 容器设置绝对定位!!
原文地址:https://blog.csdn.net/weixin_46607967/article/details/140376591
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!