抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题

最新推荐文章于 2024-08-16 00:53:06 发布
原创 最新推荐文章于 2024-08-16 00:53:06 发布 · 2.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

本文介绍了解决Element UI中el-dialog弹窗定位不准确的方法，通过添加属性append-to-body来确保对话框正确显示于屏幕中央。

解决方法：el-dialog中加上 append-to-body

 

添加前：

 

添加后：

 

el-drawer抽屉组件弹窗遮挡问题解决
宁波阿成的博客
12-01 1817
el-drawer抽屉组件弹窗遮挡问题解决
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
🏆 前端领域优质创作者
03-20 4375
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
element-ui 抽屉里面嵌套弹窗
锦瑟年华L的博客
12-19 1961
element-ui 抽屉里面嵌套弹窗
element ui 两个模态框嵌套问题
weixin_44348028的博客
09-22 1481
将第二个模态框做成组件进行弹出是，需要加上append-to-body属性就可以解决蒙版问题 父-模态框 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> //..... <eldialogson></eldialogson>//子组件模态框 </el-dialog> 子-模态框 <el-dia
VueDialog弹窗诟病轻松解决
梅花寺
01-18 1545
本质其实本次分享页并没有很多新意,这种引用式的封装,很多人也早都想到了,只不过感觉针对弹窗这块的封装,很多走了极端，要么就追求layer那种写法兼容习惯,要么干脆还是保留原样,只做一些特殊处理，属性还是原样保留了。至于回调,我之前虽然用过一段,但还是觉得不慎习惯，因为偶然有个共享弹窗存在确认后逻辑不同的问题给我造成了困扰,觉得写法有点儿变态,因此做了一些尝试和延展,觉得算是比较良性的一个调用方式吧。
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案，vue在＜el-drawer＞中嵌套＜el-drawer＞时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
G佳伟
09-27 1995
背景：vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后自己定义了一个组件，虽然简陋但是解决了问题。为了解决问题自己封装了一个简易的抽屉组件
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 2302
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
vue2二次封装element ui的抽屉组件el-drawer
buzhidjiaosha的博客
08-16 785
【代码】vue2二次封装element ui的抽屉组件el-drawer。
精选资源
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 2305
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
抽屉里面嵌套弹窗
闪光向日葵战士
03-22 491
【代码】抽屉里面嵌套弹窗。
Element-ui 同时使用Drawer和Dialog多个遮罩层问题
weixin_45849417的博客
10-14 2362
开在发过程中，我先使用了Drawer,然后再点击Drawer里面的Dialog弹框，就会出现多个遮罩层的问题。在 el-dialog组件里面添加 append-to-body。
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
MingT 明天你好！的博客
07-26 1万+
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（dialog）出现蒙层遮挡弹框问题
日常工作记录 el-drawer弹窗遮罩问题
caiweim的博客
11-03 2625
将modal置为false就行，这样其实也解决了，貌似没什么问题，就是少了遮罩层。然后我就发现了append-to-body这个属性，将自身插入body元素上，嵌套的必须为true，将append-to-body置为true，然后发现问题解决了。问题出现了，因为我引入的那个界面原本就有一层弹窗了，导致打开el-drawer弹窗的时候整个界面都被这层遮罩挡住了。在开发的时候有个需求，在一个地方增加一个页面的入口，这很简单，加个按钮，将页面引入，增加一个弹窗就行。东西很简单，日常记录一下。
element-ui的drawer组件嵌套，关闭一层后遮罩层未关闭
qhs320684的博客
02-19 1118
drawer嵌套遮罩层无法关闭问题
elementUI Drawer 抽屉 Dialog 对话框 等弹出组件的遮罩层以及多层遮罩解决办法
热门推荐
小糖穿越火线
10-30 1万+
append-to-body 解决多层遮罩层覆盖的问题 <el-dialog title="编辑处理结果" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body > :modal-append-to-body=“false” 解决一层遮罩层覆盖问题 <el-dialog title="编辑处理结果" :visible.sync="dialog
笔记：ElementUI el-dialog弹框被遮罩层挡住了？Why！！！
sky8880的博客
10-14 882
ElementUI el-dialog
el-dialog 嵌套的 el-drawer 拖拽后样式问题
最新发布
02-07
### 解决 `el-dialog` 嵌套 `el-drawer` 拖拽后的样式问题 当在 `Element UI` 中使用 `el-dialog` 和 `el-drawer` 组件时，可能会遇到拖拽操作后样式错乱的问题。为了修复这一问题，可以通过自定义 CSS 样式以及调整组件属性来实现更好的用户体验。 #### 自定义 CSS 样式 通过覆盖默认的 CSS 类名，可以确保拖拽过程中不会影响到其他布局元素。具体来说，在项目中添加全局或局部的样式规则： ```css /* 调整 dialog 的位置 */ .el-dialog { position: fixed; } /* 防止 drawer 内部滚动条消失 */ .el-drawer__body { overflow-y: auto !important; } ``` 这些样式能够帮助保持对话框的位置固定，并允许抽屉内部的内容正常滚动[^1]。 #### 修改 JavaScript 行为 如果发现仅靠 CSS 不足以解决问题，则可以在 Vue 实例内监听事件并动态修改 DOM 结构或者类名。例如，利用钩子函数处理打开关闭状态变化时的行为逻辑： ```javascript // 在 mounted 生命周期里绑定 mousemove 事件用于检测鼠标移动距离从而计算偏移量 mounted() { document.addEventListener('mousemove', this.handleMouseMove); }, methods: { handleMouseMove(event) { // 计算新的 top/left 值... const newX = event.clientX - initialX; const newY = event.clientY - initialY; // 更新 element-ui 对应实例的数据模型里的 position 属性值 this.$refs.dialogRef.setPosition({ x: newX, y: newY }); } } ``` 此方法适用于更复杂的交互场景，比如需要精确控制拖动范围等情况[^2]。 #### 使用第三方库辅助开发 对于复杂的应用程序而言，引入专门针对可拖放特性的插件可能是更为简便的选择之一。像 SortableJS 或者 vue-draggable-next 这样的工具可以帮助简化代码编写过程的同时也提供了丰富的配置选项支持多种需求。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值