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

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

解决方案

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

 

实现流程

1.创建 dialogDrag.js 文件

// draggable.js 设置el-dialog可拖动

export default {
    bind(el) {
      let startPosition = { x: 0, y: 0 };
      let dialogPosition = { x: 0, y: 0 };
      let dialogSize = { width: 0, height: 0 }; // 新增保存对话框宽度和高度的变量
      let dragging = false;
  
      const handleMouseDown = (e) => {
        startPosition.x = e.clientX;
        startPosition.y = e.clientY;
        dialogPosition.x = parseInt(el.style.left, 10) || 

相关推荐

  1. 使el-dialog实现

    2024-04-29 06:58:03       43 阅读
  2. Vue3封装可

    2024-04-29 06:58:03       50 阅读
  3. vue,div

    2024-04-29 06:58:03       44 阅读
  4. el-dialog 实现可以拖动

    2024-04-29 06:58:03       27 阅读
  5. vue实现dialog封装

    2024-04-29 06:58:03       24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-29 06:58:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-29 06:58:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-29 06:58:03       87 阅读
  4. Python语言-面向对象

    2024-04-29 06:58:03       96 阅读

热门阅读

  1. ROS常用命令详解

    2024-04-29 06:58:03       31 阅读
  2. json.loads()与json.dumps()区别

    2024-04-29 06:58:03       34 阅读
  3. k8s解析数据 -o=jsonpath=‘{}‘ 的使用

    2024-04-29 06:58:03       19 阅读
  4. Qt---枚举类型enum--->QString

    2024-04-29 06:58:03       34 阅读
  5. Github 2024-04-28 开源项目日报 Top10

    2024-04-29 06:58:03       29 阅读
  6. 大数据004-hadoop002-数据

    2024-04-29 06:58:03       30 阅读
  7. ubuntu查看libc版本

    2024-04-29 06:58:03       32 阅读
  8. Redis分布式锁学习

    2024-04-29 06:58:03       28 阅读
  9. 什么是ar.exe?

    2024-04-29 06:58:03       31 阅读
  10. C语言内存函数及模拟实现

    2024-04-29 06:58:03       33 阅读