ElementUI ---- dialog点击取消后蒙遮层不消失

于 2024-05-31 16:00:38 发布
阅读量280 收藏
点赞数 3
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81772570/article/details/139354884
版权

我的场景： 页面A打开了  dialog，  然后点击 页面A dialog 的确定按钮 跳转到  页面B，并且打开页面B的 dialog

但是页面B的 dialog 关闭后，蒙遮层并没消失（已经设置了 :append-to-body="true"）

最后发现：页面B的 dialog 蒙遮层用的是 页面A的，o(╥﹏╥)o

解决：页面A 跳转到页面B 的时候，记得先把页面A的 dialog 关闭！！！

络腮胡啊
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空
Maanqi_1214的博客
03-22 2090
1.el-dialog弹出框被遮罩层覆盖 解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
热门推荐
肖肖肖丽珠的博客
04-01 1万+
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框 这时我们发现这个解析的框被外面一个遮罩层挡住了。 我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。 首先查看官网的element-ui的el-dialog的一些属性 首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
yuxuan89814的专栏
03-20 3029
element-ui dialog遮罩层遮挡
elementui dialog关闭遮罩还在---已解决
沙漏的前端笔记
04-18 5850
element UI dailog关闭但是遮罩未关闭---已解决
解决elementui多层dialog弹窗遮罩问题
Let_me_tell_you的博客
06-07 3368
多层弹窗，会出现遮罩问题，需要鼠标点击一下才能进入当前顶层弹窗正常使用状态。效果图如下：解决办法：在弹窗代码上加上 解决问题。
vue =＞ element 当dialog嵌套在其他组件中 打开和关闭都会有遮罩层
Write less，do more
03-15 2290
情况 外层是抽屉el-drawer ，抽屉 el-drawer里面是封装的其他组件 结构如下 直接嵌套的dialog不会出现遮罩层 但是如果封装成了组件再点击事件打开的话，会出现遮罩层，并且关闭后遮罩层还会出现 所以应该进行如下操作 未修改前 <el-drawer> <组件1> <el-dialog组件2> <div > <el-dialog > </el-dialog> </
el-dialog 点击遮罩层就不关闭
最新发布
2201_75410538的博客
03-06 409
【代码】el-dialog 点击遮罩层就不关闭。
material-dialogs_material-dialogs_dialog_android开发_material_
09-30
"material-dialogs"库则将这些概念具体化，提供了丰富的自定义选项和预设样式，包括但不限于： 1. **主题定制**：开发者可以根据Material Design规范，轻松地定制对话框的主题颜色，如背景色、按钮色、文字色等。 2...
微信小程序 - dialog
03-29
实现了 标题,内容和按钮设置,可动态设置按钮,以及按钮点击事件的回调 可作为component 使用 (此图片来源于网络，如有侵权，请联系删除! ) 直接上代码 (此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络...
基于elementui-vue的后台管理系统代码
05-26
在"vue-elementui后台管理系统代码"中，我们可以找到一个基于 Vue.js 和 ElementUI 构建的后台管理系统的源码。这个名为 "vue_shop-master" 的项目很可能是一个电商后台管理系统的实例，包含了创建、维护和管理商品...
element ui 对话框el-dialog关闭事件详解
08-27
`el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要在用户关闭对话框后执行某些清理工作时，如清空输入数据、恢复初始状态或者更新视图等。下面我们详细讲解 `el-dialog` 的关闭事件及其用法。 ###...
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 2170
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 7512
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
vue element-ui的嵌套dialog遮罩层
weixin_43823766的博客
06-28 1万+
vue element-ui的嵌套dialog遮罩层打开dialog时，遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住 自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，自己解决办法如下 打开dialog时，遮罩层直接将全部body遮住 这里需要加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body...
vue+Vant，关闭Popup弹框，遮罩层并没有消失
yaya07755的专栏
09-27 2252
点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 1396
关于el-dialog上额外多了一层遮罩层
element-ui的drawer组件嵌套，关闭一层后遮罩层未关闭
qhs320684的博客
02-19 522
drawer嵌套遮罩层无法关闭问题
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组件内部添加其他元素、组件或文本。 希望这个回答能够帮助你解决问题！如有任何疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值