Vue3+ElementUI Plus 实现可拖拽移动 el-dialog 窗口方法详解
以下是几种实现方法:
-
使用 'vue-draggable-resizable' 插件,可以方便地实现拖拽和调整大小功能,具体实现方法可以参考官网文档。
-
在 'el-dialog' 组件上添加一个 mousedown 事件,记录鼠标位置和 dialog 位置的差值,然后在 mousemove 事件中根据差值改变 dialog 的位置,最后在 mouseup 事件中移除事件监听器。
-
使用 'vuedraggable' 插件,将 'el-dialog' 包裹在 'vuedraggable' 组件中,然后设置 'el-dialog' 的 position 为 fixed,这样就可以实现拖拽功能。
-
使用原生的 HTML5 drag and drop API,在 'el-dialog' 组件上添加 dragstart 和 dragend 事件,然后在 dragover 和 drop 事件中改变 dialog 的位置,具体实现方法可以参考 HTML5 drag and drop API 的官方文档。
原文地址: https://www.cveoy.top/t/topic/nglx 著作权归作者所有。请勿转载和采集!