当前位置: 首页 > Web前端 > vue.js

Vue3拖拽缩放组件,支持吸附对齐,实时参考线等

时间:2023-03-31 15:40:53 vue.js

最近用Vue3写了一个拖拽调整位置和大小的组件,还支持冲突检测,元素吸附对齐,真实-时间参考线和其他功能。第一个git地址:Vue3DraggableResizable特性支持拖动和缩放,可单独定义开启或关闭**自定义缩放手柄(缩放时共八个方向可操作,可分别定义开启或关闭)**限制组件的拖动和缩放在其父节点中**自定义组件中的各种类名**缩放手柄的类名也可以自定义**元素吸附对齐**实时引导线**自定义引导线**使用Vue3和ts**这个组件有几十个参数和事件,可以通过各种方式配置。具体可以参考Github的详细文档。这里只讲简单的用法和特点。和上面一样,你可以简单地导入组件。注意,默认导出的Vue3DraggableResizable组件是一个拖放缩放组件,可以单独使用,也可以和DraggableContainer结合使用,DraggableContainer是另一个容器Component,该组件提供对自动吸附、参考线等功能的支持。如果不需要自动吸附,可以直接单独使用Vue3DraggableResizable组件。具体道具和事件请参考git文档。如果这个组件对你有用,你可以在git中找到它,最好在线给我一个star。如果您在使用过程中有任何问题,欢迎您就issues提出问题,我会尽快修复或解决。