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

本文介绍如何为ElementUI的el-Dialog添加拖拽功能,包括宽度高度适配和关闭后居中显示,提升后台管理系统用户体验。通过创建dialogDrag.js并引入Vue文件,实现了100%兼容的解决方案。
摘要由CSDN通过智能技术生成

  我们在做后台管理系统时常用到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 = fals
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值