element ui使用Dialog 对话框关闭遮罩层 class=v-modal元素

最新推荐文章于 2024-08-19 15:37:26 发布

if时光重来

最新推荐文章于 2024-08-19 15:37:26 发布

阅读量5.1k

点赞数 1

分类专栏： vue 文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/admin_web/article/details/122996413

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

"本文介绍了如何在前端开发中关闭遮罩层，重点讲解了`modal`和`modal-append-to-body`两个属性的用法。`modal="false"`用于关闭遮罩层，而`modal-append-to-body="false"`则允许将遮罩层插入到当前元素下，而非默认的body元素。示例代码展示了在el-dialog组件中的具体应用，这对于自定义对话框的样式和交互具有重要意义。"

摘要由CSDN通过智能技术生成

关闭遮罩层使用属性 :modal=“false”
是否将遮罩层插入至 body 元素上，默认为true。:modal-append-to-body=“false” 可以将插入body元素上的遮罩层插入到当前元素下


<el-dialog :visible.sync="show_form" title="添加活动" width="90%" :lock-scroll="false" :modal="false" @close="closeDialog">

</el-dialog>

官方文档解释：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

if时光重来

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

m0_38109616的博客

12-01

1961

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭

weixin_44370837的博客

04-12

8475

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。重现步骤如下：打开使用el-dialog编写的弹框点击浏览器的回退按钮现象：弹框的遮罩层没有关闭解决办法：根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。

参与评论您还未登录，请先登录后发表或查看评论

el-dialog取消遮罩层，支持拖拽，底部内容可操作

最新发布

Juihui822的博客

08-19

335

注意：样式的 my-dialog-class需要与属性 modal-class绑定的值保持一致....操作好上面两步，应该就实现功能啦~

Vue 弹窗黑色遮罩 class v-modal

weixin_44031940的博客

02-03

1176

Vue 多层弹窗黑色遮罩 class v-modal

element-dialog对话框去掉覆盖层、并可操作底层的按钮

c601757850的博客

06-02

3135

dialog对话框去掉覆盖层、并可操作底层的按钮

vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面

liuzaixi的博客

03-18

2445

三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。

element-plus dialog对话框去掉覆盖层、并可操作底层的按钮

weixin_44442674的博客

03-26

816

加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。

Element UI：Dialog对话框详解与示例

"Element Dialog对话框的使用示例，展示了如何在Vue应用中利用Element UI库创建和定制对话框组件，包括基本用法和自定义内容的实现。" Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一系列丰富、美观的...

Element Dialog对话框的使用示例

10-15

Element Dialog对话框是Element UI库中的一个核心组件，用于创建各种对话框，提供了一种在用户界面中展示信息、确认操作或进行交互的有效方式。它提供了丰富的定制化选项，可以轻松地集成到Vue.js项目中。 ### 基本...

element ui里dialog关闭后清除验证条件方法

08-27

Element UI 中 Dialog 关闭后清除验证条件方法 Element UI 是一个基于 Vue.js 的桌面端组件库，提供了许多功能强大且易用的组件，其中 Dialog 组件是其中一个非常常用的组件。然而，在使用 Dialog 组件时，经常会...

element ui Dialog对话框

qq_36010613的博客

01-16

6139

element ui Dialog对话框 点×触发事件点击标题右上角的×执行的事件使用的是自己手写的方法用slot绑定重写使用本身的 before-close、destroy-on-close、close均没有用 :close-on-click-modal=“false” // 点击遮罩不关闭 :show-close=“false” // 不显示关闭按钮 <template&...

element自定义组件实现v-mode效果

czh4869623的专栏

11-22

898

element自定义组件实现v-mode效果 element自定义组件实现v-mode效果

element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题

weixin_44269229的博客

10-25

1720

element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题

el-dialog弹框出现遮罩层,去掉的办法

weixin_50216073的博客

03-14

1662

el-dialog弹框出现遮罩层,用它自带属性 modal-append-to-body。如果出现多个遮罩层,使用append-to-body。

去除 element-ui 中 Dialog 对话框遮罩层的方法

Sun_blog

12-21

9684

<el-button type="text" @click="centerDialogVisible = true" >点击打开 Dialog</el-button > <el-dialog title="dialog去掉遮罩层" v-model="centerDialogVisible" width="30%" center :modal="false" append-to-body="true"> <span>注意：modal需要用v-bind指

elementUI表单v-model绑定及校验(动态表单校验)技巧

Study123wf的博客

08-22

5208

elementUiform表单绑定及校验

【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？

椰卤工程师的个人博客

07-06

3956

到底是什么问题？没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto

点击el-dialog出现v-modal

FVZ的博客

07-01

1711

问题描述优化项目时突然发现一个问题，点击弹框显示后会变暗，同时弹框里的东西都点不了，只有任意点击一下才会恢复正常查找原因去官方文档查找，应该是遮罩层插入到了body上，在代码中加入model-append-to-body 结果运行代码，弹框正常，f12审查元素发现v-modal没了，问题解决！ ...