Vue中ElementUI的dialog弹出框被遮罩层盖住

最新推荐文章于 2024-02-19 11:52:52 发布
最新推荐文章于 2024-02-19 11:52:52 发布
阅读量4.9k 收藏 5
点赞数 4
分类专栏： vueJS类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdminGuan/article/details/105138250
版权

点击选择车队进行搜索查询后弹出框被遮罩层盖住

 原因一：因为dialog的组件外层div设置了 position: absolute; 属性，所以导致遮罩层会在最上面

原因二：因为是 dialog 里面又嵌套了一个dialog，需要在里面的dialog加上:append-to-body="true"

:append-to-body="true"

 

我的是因为第二个原因导致dialog弹出框被遮罩层盖住

UserGuan
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-dialog的弹出层组件
08-31
主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
thinkphp6_vue+elementUi后台基础管理框架.zip
11-14
基础路由前后一起存储，用户登录后从后端获取菜单权限，再由前段生产路由。这样前端不用编写路由。缺点是添加菜单需要注意使用...运行vue前端运行出现echarts报错，请安装对应版本即可。我也是刚遇到。解决方法网上有。
element-ui框架的el-dialog弹出框被遮罩层挡住了
qq_35592856的博客
04-12 2266
element-ui框架的el-dialog弹出框被遮罩层挡住了 el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题。 解决方案 1、给el-dialog设置modal-append-to-body=“false”，使遮罩层插入至 Dialog 的父元素上。（推荐） 2、给position:fixed的父...
element-ui 的Dialog被蒙板遮住原因及解决办法
OHRadiance的专栏
11-05 1186
传送门
Element ui 丨Dialog：使用Dialog组件会出现遮罩层在Dialog上方的解决方案
最新发布
weixin_39142106的博客
02-19 310
问题：使用Dialog组件会出现遮罩层在Dialog上方?解决方案：添加append-to-body属性。
vue 弹出遮罩层样式实例
10-15
主要介绍了vue 弹出遮罩层样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 1594
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
解决element中对话框遮挡的问题，让你的页面更美观
Shids_的博客
11-04 3039
解决element中对话框遮挡的问题，让你的页面更美观
element中dialog遮罩层覆盖弹框问题
2201_75474092的博客
04-20 589
使用的element-UI这个库时使用 <el-dialog></el-dialog> 时对话框时发现弹窗被遮盖层覆盖 只需要为<el-dialog>加入append-to-body="true"就可以解决此问题 官方文档:
vue element-ui 关于遮罩层挡住了dialog对话框的问题
weixin_44408018的博客
02-19 399
遇到遮罩层挡住对话框，调整对话框位置，一般放在最前面
el-dialog被挡住了，不在最高层，z-index：999无效
Salt_NaCl的博客
02-14 2517
在dialog的组件内加上这段代码 :append-to-body=“true”；或者:modal-append-to-body=“false” 即可解决
element ui：解决dialog被遮盖层覆盖问题
m0_64401231的博客
10-17 1023
element ui：解决dialog被遮盖层覆盖问题
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui框架的el-dialog弹出框被遮罩层挡住了，vue-element-ui弹出框和el-select层级混乱
qq_42483780的博客
08-20 4878
Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
杜鲁阳的博客
06-19 8601
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖 一、问题表现 el-dialog弹出框被遮罩层覆盖 但是，浏览器调试时，明明遮罩层比弹出框z-index层级小【低一层】。 二、解决方法 在el-dialog标签里添加 :modal-append-to-body='false’ :modal-append-to-body='false' 成功被解决。 三、解决原理：...
日常开发记录-elementUI框架的 el-dialog 弹出框被遮罩层挡住了
machine_vision123的博客
09-05 94
解决方法： el-dialog 标签中添加 :modal-append-to-body="false" 属性即可
笔记：ElementUI el-dialog弹框被遮罩层挡住了？Why！！！
sky8880的博客
10-14 740
ElementUI el-dialog
vue+elementui el-dialog弹出框X按钮点击事件
07-28
在Vue.js中，可以使用Element UI库来创建弹出框（dialog）组件。要实现点击弹出框的X按钮时触发的事件，你可以按照以下步骤进行操作： 1. 首先，确保已经正确引入Vue和Element UI库。可以使用npm或直接引入CDN链接。 2. 在Vue组件中使用el-dialog组件，例如： ```html <template> <div> <el-dialog title="弹出框标题" :visible.sync="dialogVisible" @close="handleClose" > <!-- 弹出框内容 --> </el-dialog> </div> </template> ``` 3. 在Vue组件的`data`属性中定义一个`dialogVisible`变量来控制弹出框的显示与隐藏： ```javascript export default { data() { return { dialogVisible: false }; }, // ... } ``` 4. 在Vue组件的`methods`中定义一个`handleClose`方法，用于处理点击弹出框的X按钮事件： ```javascript export default { // ... methods: { handleClose() { // 这里是点击弹出框的X按钮时要执行的逻辑 } } } ``` 5. 现在，当你点击弹出框的X按钮时，会调用`handleClose`方法。 注意：上述代码中的"弹出框内容"部分需要根据你的实际需求进行填充，可以在el-dialog组件内部添加其他元素、组件或文本。 希望这个回答能够帮助你解决问题！如有任何疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值