element-ui dialog弹窗 设置点击空白处不关闭

最新推荐文章于 2024-06-18 09:48:59 发布
最新推荐文章于 2024-06-18 09:48:59 发布
阅读量4.7k 收藏 4
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33911541/article/details/132708890
版权

根据官网提供方法

场景：vue实现的网站有两个弹窗同时出现时，关闭报警，批量进度条弹窗也关闭了，

1、每一个页面都有可能出现的报警弹窗，

2、页面a批量操控硬件添加操作的进度条弹窗

开始以为是因为点击报警弹窗，相当于点击modal(空白处)所以导致关闭报警弹窗的同时也关闭了进度条弹窗，所以涉及到了空白处误关闭了进度条的问题；官方方法如下：

需求：点击空白处不关闭弹窗

实现：:close-on-click-modal="false"

需求：点击Esc不关闭弹窗

实现：:close-on-press-escape="false" 

皓月当空hy
关注
vue element ui 打开弹窗出现黑框问题
xiaohua616的博客
04-20 1209
完美解决 element ui 打开弹窗出现黑框问题
element-plus dialog对话框去掉覆盖层、并可操作底层的按钮
weixin_44442674的博客
03-26 1294
加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。
element-ui设置dialog点击空白不关闭
u013008898的博客
04-15 2168
<el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
element-ui dialog弹窗 设置点击空白处不关闭
热门推荐
yssa1125001的博客
05-22 2万+
element-ui dialog弹窗默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭。它本身自带该功能： 也就是“:close-on-click-modal”这个属性设置成false就可以了 <el-dialog title="添加章节" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
element-ui对话框点击下方无法关闭
最新发布
01-15
### ElementUI Dialog 点击外部不关闭解决方案 对于ElementUI中的`<el-dialog>`组件，默认情况下点击弹窗外区域会触发关闭操作。...通过上述任一方式都可以达到防止用户点击空白处即关闭对话框的效果。
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭
weixin_41697323的博客
12-03 5243
需求描述 今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。 弹窗关闭后还显示一层遮罩层，设置append-to-body即可 问题分析 之所以会产生这种问题，是因为elementUi在...
element-ui和vue表单(对话框)验证提示语(残留)清除操作
01-18
如果一个页面有多个按钮打开相同的element-ui的Dialog对话框，那么如果第一个点击”顺序”按钮出现红色验证提示语后， 再点击“取消”，或者点击页面空白处此对话框消失，而后再点击同一个“顺序”按钮亦或别的...
【Dialog】elementul Dialog组件点击空白处不关闭，点击空白处执行方法，点击关闭按钮执行方法
seeeeeeeeeee的博客
04-11 1706
问题: 有时候我们可能需要把dialog组件用来封装成一个组件，引入到我们的另一个父组件内，这样我们就需要传值了，而点击空白处点击关闭叉叉之类的他默认的都是直接改变dialogVisible的值为false。但是，因为是组件引入了，所以直接改变值会报错，需要用$emit去改父组件的变量为false才行。这里就用到提供的一个关闭前的方法了。 点击空白处不关闭 核心语句：:close-on-click-modal=“false” 这句话意思就是是否可以点击空白处关闭，false为不关闭 <el-d
element-ui dialog弹窗 点击空白处使弹窗区不关闭
weixin_55648290的博客
12-22 810
element-ui dialog弹窗 点击空白处使弹窗区不关闭
element ui点击空白处不关闭弹框 el-dialog
————————————————————————————————
12-17 563
el-dialog默认点击空白处也会关闭弹框 它本身自带这样一个功能 “:close-on-click-modal” 想要关闭这个功能只需要在标签上加这个属性就可以了 <el-dialog title="弹框" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
ddf__的博客
01-06 5412
组件时，当点击弹框外的空白处时，仍然会触发关闭弹框事件，一些业务场景不适合使用这种交互，需要只能点击关闭和取消按钮才消失。
close-on-click-modal设置点击空白处不关闭弹框
weixin_43896145的博客
06-13 892
如果想设置为点击空白处不要关闭弹框，只需要将其设置为false即可。关闭 Dialog，即点击空白处弹框可关闭。对话框默认是可以通过点击。element组件库的。
element 弹窗dialog垂直居中，并且点击弹窗以外部分不关闭，弹窗头部 底部固定 中间滚动
h2790832998的博客
06-18 578
1.点击弹窗以外部分不关闭，在main.js中引入。3.窗头部 底部固定 中间滚动。2.弹窗dialog垂直居中。
elementui diag空白选中自动退出
laoli815的博客
07-10 341
elementui选中空白或者input会不点击取消确定或关闭闪关
el-dialog中点击弹框外的区域不关闭弹窗
m0_51830650的博客
05-10 5661
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
vue el-dialog点击空白不关闭
Aa_duidui的博客
03-30 2463
单个控制 <el-dialog :close-on-click-modal="false"> </el-dialog> 全局控制 在main.js中添加 import Element from 'element-ui' //全局修改默认配置，点击空白处不能关闭弹窗 //一般只需要写入下面这句话就可以,引入是默认带的 Element.Dialog.props.closeOnClickModal.default = false Vue.use(Element) ...
el-dialog点击空白处弹窗宽高改变
01-08
### 解决 `el-dialog` 点击外部导致弹窗宽高变化 当使用 Element UI 的 `el-dialog` 组件时，默认情况下点击模态背景可以关闭对话框。然而，在某些场景下，如果实现了自定义功能如拖拽调整宽度，则可能遇到点击外部区域导致弹窗尺寸意外变动的问题。 为了防止这种情况发生，可以在初始化阶段禁用默认行为并实现特定逻辑来控制何时允许关闭对话框以及如何保持其大小稳定： #### 方法一：通过配置属性阻止点击遮罩层关闭 设置 `close-on-click-modal=false` 属性能够有效避免用户误触造成窗口关闭的同时也间接解决了因触发事件链引起的尺寸重置现象[^2]。 ```html <el-dialog v-dialogDrag id="addRoleDialog" :before-close="handleClose" :visible.sync="dialogVisible" append-to-body title="添加角色" width="28%" close-on-click-modal="false"> </el-dialog> ``` #### 方法二：利用钩子函数拦截关闭动作 对于更复杂的交互需求，比如仅在满足一定条件下才允许关闭操作，可通过监听 `before-close` 钩子来进行干预处理。在此过程中也可以同步保存当前的样式状态以便恢复[^1]。 ```javascript methods: { handleClose(done) { this.$confirm('确认要关闭吗？') .then(_ => { // 可选地存储 dialog 当前的状态 (例如位置/大小) done(); }) .catch(_ => {}); } } ``` 另外值得注意的是，若已经集成了第三方插件用于增强 `el-dialog` 功能（如拖拽），则应确保这些额外特性不会干扰到基础的行为模式。检查所使用的指令或方法是否有提供相应的选项去管理此类副作用[^4]。 最后提醒一点，针对多标题切换显示不同内容的情况，虽然这与解决点击外关闭无关，但在设计整体用户体验时仍需考虑各部分之间的协调一致性[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值