点击el-dialog关闭按钮无效

最新推荐文章于 2024-06-24 11:08:39 发布
最新推荐文章于 2024-06-24 11:08:39 发布
阅读量2.3k 收藏 2
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Caoshilong1/article/details/131697850
版权
文章讨论了在代码中将`:visible`改为`:visible.sync`的问题，以及对话框（dialog）因内部数据错误导致无法关闭的常见问题。解决方法是确保赋值操作在正确的判断内部进行，以避免数据错误影响功能。
摘要由CSDN通过智能技术生成

1、:visible改成:visible.sync

2、一般情况就是dialog里面数据报错才导致关闭不了  要先解决数据报错问题。

这是同事做的判断 离了个谱做了判断赋值还在外面直接赋值

正确的放在判断里面才行解决数据报错

 

高树悲风
关注
【vue3】使用自定义指令，实现el-dialog的拖拽功能。
梅花寺
09-19 1248
因为要自己操作dom（设置事件），所以感觉还是使用自定义指令更直接一些，而且对原生组件的影响更小。const _dialogDrag = {// mounted mounted (el: any, binding: any) {// 监听 dialog 是否显示的状态watch (binding.value, () => {// dialog 不可见，退出if (!
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8422
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
element-ui中dialog弹窗关闭按钮失效的解决
01-18
如下所示： <el title=修改库存 visible.sync=kcDialog close=kcDialog> ... </el> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js index.html <script src=https://code.jquery.com/jquery-3.1.0.js integrity=sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
最新发布
2301_76866366的博客
06-24 546
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
el-dialog无法关闭
carbonzhao的专栏
09-03 1429
代码如下，:visible.sync="result2DeptVisible"来控制dialog的隐显问题，但当点击关闭的时候 ，无法关闭！原来是data中没有定义 result2DeptVisible属性导致的。添加result2DeptVisible:false即可。总结：dom页面上使用的变量尽量按照要求在data中进行定义避免出现一些意外问题去费时排查。
【bug】关于Vue封装el-dialog对话框关闭无反应问题
花椒和蕊的博客
11-19 4501
封装dialog弹窗
点击dialog关闭按钮无效
Heartnottowake的博客
10-11 720
visible改成:visible.sync。
使Dialog的关闭按钮失效
cuseronline的专栏
05-09 719
<br />继承自org.eclipse.jface.Dialog的对话框，覆盖父类Windows的handleShellCloseEvent方法，可使<br />其关闭按钮失效<br />@Override<br /> protected void handleShellCloseEvent() {<br />    //do nothig <br />   //当然在handleShellCloseEvent中做其它事情也是可以的，具体看代码怎么写了。<br />   // 或者在这里面写上其它代码，进
【el-table与el-popover连用，弹窗无法关闭】
likebidiu的博客
07-11 1457
el-table与el-popover连用，弹窗无法关闭 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 el-table与el-popover连用，弹窗无法关闭问题背景一、代码二、页面效果三、解决办法2.原因总结 问题背景 el-table中使用el-popover,点击弹出框中的取消和确定按钮无法关闭 一、代码 <template> <el-row :gutter="20"> <el-col :xs="24" :sm="24" :md="24
el-dialog close不生效
04-28
关闭方法可以通过点击X按钮、ESC按键或者自定义关闭按钮实现，如果相关操作无法触发关闭方法，则close不生效。解决方法是在代码中正确绑定关闭方法。 2.代码中未正确设置属性。关闭方法需要通过设置el-dialog组件的...
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI踩坑 el-dialog关闭不掉
热门推荐
SHERLOCK_96的博客
05-29 1万+
遇到了dialog弹窗关不掉的问题，解决方法如下 在标签中加入@close=‘closeDialog’ html <el-dialog :title="标题" :visible="dialogCode" width="20%" @close='closeDialog'></el-dialog> js export default{ data(){ return{ dialogCode:true } } methods:{ closeDialog() {
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_47673852的博客
04-15 716
项目案例： 测试期望结果：点击关闭和取消按钮才会消失 // main.js 中可以全局设置 点击空白处、按下ESC不能关闭Dialog弹窗 // 首先你得保证在main.js里面引入了 element-ui import ElementUI from 'element-ui' // 全局修改默认配置，点击空白处不能关闭弹窗 ElementUI.Dialog.props.closeOnClickModal.default = false // 全局修改默认配置，按下ESC不能关闭弹窗 El
el-dialog遇到的问题
qq_37120809的博客
12-15 2220
3.改上面的问题，把dialog组件自带的关闭按钮去掉了，属性 ：show-close="false"，我下意识想写成（show-close="false"但是会报错），测试又发现新问题：点击取消按钮可以清空form表单里原来的内容，但是点击空白处对话框也会关闭，此时里面内容不会清空；5.遗留问题：在el-table组件中点击编辑回显到dialog弹框里时，修改某条信息但不保存，关闭对话框后，table表格里的信息是修改后的，需要刷新后才能拿回真实的数据，目前是关闭对话框后重新调取接口；
dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...
weixin_30539747的博客
12-24 3449
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...
【问题解决】-ElmentUI中dialog弹出窗关闭卡死崩溃问题解决
gjb760662328的博客
05-09 1928
elementui-弹窗关闭卡死
elementui el-dialog 作为子组件使用关闭时报错
阿清的前端进阶之路
03-23 1169
1. 弹窗作为子组件 父组件通过点击事件来打开弹窗，然而，在弹窗中点击窗外之外的空白区域或者右上角叉时候一直报错: 翻译：避免直接改变一个道具，因为当父组件重新渲染时，这个值会被覆盖。相反，使用基于道具值的数据或计算属性。正在发生突变的道具:“editVisible” 2. 原因分析 从翻译来看，子组件中不能直接更改父组件传递过来的数据，然后就按照提示将传递过来的数据在 data 和 computed 都重新复制一遍，仍然报同样的错。 3. 解决方法 最后通过一行代码顺利解决，在弹窗上加上 :before
ELEMENT UI 弹窗右上角关闭按钮失效的处理方法
weixin_52066534的博客
09-26 6946
在开发过程中，会经常把添加和编辑的弹窗写在一起，减少代码量，这样有时会出现弹窗右上角关闭按钮失效，点击以后弹窗没有关闭，如下图所示： 点击取消就是没问题的，只有右上角的关闭按钮失效，这时可以用官方文档提供的“before-close”来解决这个问题 这是官方文档，进去就能看到详细说明：https://element.eleme.cn/#/zh-CN/component/dialog 来看看怎么用吧 <el-dialog :visible.sync="editForm.di
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值