当前位置:   article > 正文

Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能(宽度高度适配,且关闭后打开位置居中)_element ui vue2 弹框可拖动

element ui vue2 弹框可拖动

  我们在做后台管理系统时常用到ElementUI 中的 el-Dialog,但是官方文档并未我们提供 el-Dialog弹窗如何实现拖拽功能,我们通常需要思考如何让用户能够自由地拖动弹窗,在页面上调整位置以获得更好的用户体验。在下面的博客文章中,我们将实现如何为 ElementUI 的 el-Dialog 弹窗添加拖拽功能,以便用户可以轻松地拖动弹窗到他们希望的位置。

解决方案

本文提供了完美便捷的解决方案,保证100%解决 ,直接使用即可。

 

实现流程

1.创建 dialogDrag.js 文件

  1. // draggable.js 设置el-dialog可拖动
  2. export default {
  3. bind(el) {
  4. let startPosition = { x: 0, y: 0 };
  5. let dialogPosition = { x: 0, y: 0 };
  6. let dialogSize = { width: 0, height: 0 }; // 新增保存对话框宽度和高度的变量
  7. let dragging = false;
  8. const handleMouseDown = (e) => {
  9. startPosition.x = e.clientX;
  10. startPosition.y = e.clientY;
  11. dialogPosition.x = parseInt(el.style.left, 10) ||
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/709179
推荐阅读
相关标签
  

闽ICP备14008679号