[element-ui] 点击el-dialog区域以外，会关闭对话框的解决办法

最新推荐文章于 2024-09-26 17:15:26 发布

原创最新推荐文章于 2024-09-26 17:15:26 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

本文介绍了如何在使用VueElementUI的el-dialog组件时，防止用户点击非关闭按钮区域时自动关闭对话框，通过设置`close-on-click-modal`属性为`false`并自定义关闭逻辑实现。

当用户点击修改、新增等按钮弹出el-dialog输入框时，点击el-dialog弹框内关闭按钮以外区域时，弹框关闭

:close-on-click-modal="false"

 <!-- 关闭房间对话框 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="closeDialogVisible"
    title="关闭房间"
    width="500"
    :before-close="handleClose"
  >

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小何…

关注关注

12
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

element 弹窗在弹出后鼠标还可以点击页面其他元素

虎康的博客

12-04

1045

如下图所示，在点击弹出弹框后，支持如下需求。

【Dialog】elementul Dialog组件点击空白处不关闭，点击空白处执行方法，点击关闭按钮执行方法

seeeeeeeeeee的博客

04-11

1809

问题: 有时候我们可能需要把dialog组件用来封装成一个组件，引入到我们的另一个父组件内，这样我们就需要传值了，而点击空白处点击关闭叉叉之类的他默认的都是直接改变dialogVisible的值为false。但是，因为是组件引入了，所以直接改变值会报错，需要用$emit去改父组件的变量为false才行。这里就用到提供的一个关闭前的方法了。点击空白处不关闭核心语句：:close-on-click-modal=“false” 这句话意思就是是否可以点击空白处关闭，false为不关闭 <el-d

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

elment ui 组件bug总结

IT博客技术分享

04-04

4872

一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置在mian.js里面： import Elem.

ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭。

weixin_43550562的博客

07-03

4179

ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭。

ElementUI点击dialog弹窗以外部分会关闭弹窗问题解决

weixin_41103943的博客

06-05

1089

ElementUI点击dialog弹窗以外部分会关闭弹窗，一句代码解决ElementUI点击dialog弹窗以外部分会关闭弹窗，在main.js里添加...

基于element-ui对话框el-dialog初始化的校验问题解决

10-14

在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...

element ui 对话框el-dialog关闭事件详解

08-27

在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...

element-ui中dialog弹窗关闭按钮失效的解决

10-14

在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...

elementui中el-dialog取消点击其他位置关闭

qq_43193513的博客

10-16

610

【代码】elementui中el-dialog取消点击其他位置关闭。

element Plus el-drawer、el-dialog 点击其他区域，关闭弹窗

最新发布

emoji111111的博客

09-26

748

el-drawer、el-dialog默认情况下，点击其他区域，会关闭该弹窗，如果要去除该功能,设置:close-on-click-modal="false"即可。

VUE的对话框el-dialog点击外部消失问题

程序大视界

05-19

6225

close-on-click-modal

ElementUI el-dialog组件点击dialog外的其他区域会导致该对话框关闭

银河刨冰的博客

04-22

2381

解决办法：将el-dialog组件中的close-on-click-modal设置为false即可。但是特别要注意的一点是必须在close-on-click-modal加上：才可以。

解决点击el-dialog外的其他区域会导致该对话框关闭。

weixin_51396911的博客

03-10

8682

解决方式一：将Dialog下的close-on-click-modal属性改为‘false’。需要注意的是：在使用close-on-click-modal属性时，必须在该属性前加“:”。解决方式二：可以通过before-close属性，在Dialog关闭时，让用户进行确认是否需要关闭。 before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 befo..

elementui的dialog点击右上角关闭按钮关闭dialog

wangaiwen的博客

03-08

4174

elementui的dialog点击右上角关闭按钮关闭dialog

ElementUI+vue中点击el-dialog区域以外，会关闭对话框的解决办法。

aurora

12-24

5862

需求目标：当用户点击修改、新增等按钮弹出el-dialog输入框时，除了点击el-dialog弹框内关闭按钮以外，不能让该弹框关闭。方法一：（添加:close-on-click-modal="false"） <el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 方法二：（全局配置）在mian.js

el-dialog中点击之外的区域不关闭弹窗

BADAO_LIUMANG_QIZHI的博客

03-30

6792

场景在页面上显示一个dialog，如果显示的时候点击了弹窗之外的区域则会将dialog关闭。注：博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现 1、设置dialogde elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭， Dialog下有个‘close-on-click-modal’属性，该属性默认..

element ui的el-dialog点击关闭的问题