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

最新推荐文章于 2024-05-02 18:12:22 发布
VIP文章 最新推荐文章于 2024-05-02 18:12:22 发布
阅读量5.1k 收藏 6
点赞数 2
分类专栏： elementUI 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51830650/article/details/124698738
版权

1、设置dialogde

elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭，

Dialog下有个‘close-on-click-modal’属性，该属性默认值为‘True’，作用为：是否可以通过点击 modal 关闭 Dialog。

所以，通过设置Dialog下的close-on-click-modal属性为‘false’，即可解决该问题。

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

2、完整示例代码

<el-dialog title="添加用户" :visible.sync=&
最低0.47元/天 解锁文章
努力学习的男孩
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-pdf查看pdf文件及打印乱码的问题
01-18
前言 vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 <template> <el visible.sync=pdfDialog close-on-click-modal=false show-close=false width=900px top=52px > <div class=pdf v-show=fileType == '
el-element中解决Dialog 对话框点击非内容区域关闭的问题
在无知中学习，在学习中成长，在成长中学习
07-14 833
el-element中解决Dialog 对话框点击非内容区域关闭的问题
[element-ui] 点击el-dialog区域以外，会关闭对话框的解决办法
m0_61601708的博客
03-18 683
输入框时，点击el-dialog弹框内关闭按钮以外区域时，弹框关闭。当用户点击修改、新增等按钮弹出。
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
自定义Dialog弹框和其背景阴影显示方法
08-27
今天小编就为大家分享一篇自定义Dialog弹框和其背景阴影显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
flask-admin-modal
05-18
flask-admin-modal 例如，针对此问题，使用Bootstrap模态弹出窗口更新Flask-Admin批处理操作中选择的多个记录。 安装 git clone https://github.com/pjcunningham/flask-admin-modal.git cd flask-admin-modal # (optional, create a virtual environment) virtualenv venv && source venv/bin/activate # fetch dependencies; add '--user' if not using a virtualenv pip install -r requirements.txt # launch app w/ optional port number (default: 5000) python
全局设置element-ui Dialog组件的close-on-click-modal属性为false
热门推荐
lhz_333的博客
10-22 4万+
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_69811594的博客
03-17 4383
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
element Dialog :close-on-click-modal=“false“
蓝胖子的博客
12-21 5222
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 属性 el-dialog中close-on-click-modal含义是：点击空白处是否关闭，默认true 点击空白处不关闭弹框 只需要 :close-on-click-modal=“false” 即可 ...
Vue2+element动态弹框表单组件--配置化--低代码（公司内部统一化）
qq_41068362的博客
03-11 3892
动态表单弹框--可json配置化、低代码、自由度高、容易使用。
Element ui 取消点击空白处弹框关闭的效果
四季轮换叶，一路招摇胜
06-27 1505
Element ui 取消点击空白处弹框关闭的效果
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
Element-ui中元素滚动时el-option超出元素区域的问题
12-01
为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) popperEl是在mouseup事件里去做...
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 790
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 310
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 492
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 651
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
el-dialog弹框关闭
07-29
el-dialog弹框关闭的方法是通过设置centerDialogVisible属性为false来实现的。在代码中，可以看到el-dialog组件的visible属性与centerDialogVisible进行了双向绑定，当centerDialogVisible为false时，el-dialog弹框会关闭。在cancel方法中，通过this.$refs.video.pause()来关闭视频播放。所以，当点击取消按钮或确定按钮时，centerDialogVisible会被设置为false，从而关闭el-dialog弹框。 #### 引用[.reference_title] - *1* [使用el-dialog遇到的问题如何关闭弹窗前调用方法](https://blog.csdn.net/qq_37544675/article/details/123991474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值