elementui中el-dialog模态与非模态的研究

el-dialog模态与非模态的研究

模式对话框就是不处理它就没法处理父窗口,而非模式对话框就是不用先处理此对话框也可以处理父窗口
在单页面应用中往往因为某个vue弹窗被打开而导致不得不处理或关闭它才能选择打开其他vue，这是将对话框设置为模态对话框所导致，模态对话框必须首先执行。
在实际操作中，对于Vue+elementui架构，其中的el-dialog默认为模态，当对话框被打开时，会出现遮罩层，使其无法操作，为了研究el-dialog是否可以设置为非模态，可以进行如下操作。

1. 设计测试页面
如图所示，左边div为非模态，右边div为模态

当点击显示非模态对话框时，将el-dialog中的modal设置为false，不显示遮罩层， title=“非模态框 " :visible.sync=“showNoModal” width=“30%” :modal=false :close-on-click-modal=false :modal-append-to-body=false如图所示：

对话框并没有在预期的位置出现，它并没有处于父级div中，并且无法点击右侧div中的按钮，可以看出此仅仅只是关闭了遮罩层，并没有对实际结果产生影响。

2. 查看网页css
通过查看该dialog的style可以看出，对话框的z-index远高于div，所以会最上层显示，所以覆盖掉了两个按钮，导致按钮点击不了，如图所示：

并且该dialog的父级div（编译时自建）可能为罪魁祸首，因为它的存在使左右的div处于下层并被罩住，如图所示，

3. 修改class
发现是一个class为el-dialog__wrapper的设置了样式，如图所示：

从中可以看出，dialog采用了fixed定位，也就是绝对定位，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定，所以就导致了dialog不在左侧div内。
上面样式从1开始排序，全部关闭后如图所示：

此时，dialog正确出现在了左侧div中，并且右侧模态按钮生效，点击后如图所示

在模态框中，存在class为v-modal的类，控制着遮罩层，如图所示，

通过重写v-modal，使遮罩层处于父级div内，如图所示：

4. 分析
按理说，只需要修改el-dialog__wrapper的style就可以使对话框在父级div内，并且不影响其他div进行操作。
在源码中找到此类，在theme-chalk 中找到dialog.css，如图所示，这两个便是需要修改的类，修改后发现并没有修改成功，再次查看源代码，发现dialog组件并没有用dialog.css，而是用的index.css，随后修改此文件

将el-dialog__wrapper改为
{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
使对话框在父级元素中垂直居中显示。
效果如图所示：

可以看到对话框只显示在父元素内，不影响其他页面元素的使用
5. 存在的问题
1） 由于对话框设置了在父级div中显示，所以对话框的大小大大缩小，导致有一些数据不能全部显示
2） 遮罩层如果只在父级元素内遮罩，美观效果大大折扣
3） 对话框还是无法进行拖拽