点击el-dialog关闭按钮无效

最新推荐文章于 2023-12-15 14:25:01 发布
最新推荐文章于 2023-12-15 14:25:01 发布
阅读量2.1k 收藏 2
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Caoshilong1/article/details/131697850
版权

1、:visible改成:visible.sync

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

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

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

 

高树悲风
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...
weixin_30539747的博客
12-24 3388
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...
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=
Element-UI的dialog弹窗的右上角的叉号不能关闭弹窗
weixin_45724648的博客
08-18 4306
<el-dialog title="" :visible.sync="dialogTableVisible" :before-close="ai_dialog_close"> <el-tree :data="gridData" show-checkbox default-expand-all node-key="id" ref="tree" ...
el-dialog无法关闭
carbonzhao的专栏
09-03 1327
代码如下，:visible.sync="result2DeptVisible"来控制dialog的隐显问题，但当点击关闭的时候 ，无法关闭！原来是data中没有定义 result2DeptVisible属性导致的。添加result2DeptVisible:false即可。总结：dom页面上使用的变量尽量按照要求在data中进行定义避免出现一些意外问题去费时排查。
ELEMENT UI 弹窗右上角关闭按钮失效的处理方法
weixin_52066534的博客
09-26 6742
在开发过程中，会经常把添加和编辑的弹窗写在一起，减少代码量，这样有时会出现弹窗右上角关闭按钮失效，点击以后弹窗没有关闭，如下图所示： 点击取消就是没问题的，只有右上角的关闭按钮失效，这时可以用官方文档提供的“before-close”来解决这个问题 这是官方文档，进去就能看到详细说明：https://element.eleme.cn/#/zh-CN/component/dialog 来看看怎么用吧 <el-dialog :visible.sync="editForm.di
【bug】关于Vue封装el-dialog对话框关闭无反应问题
花椒和蕊的博客
11-19 4271
封装dialog弹窗
关于element-ui关闭dialog右上角关闭按钮，表单校验依然提示解决方法
Strive_Limingyun的博客
03-15 1358
给dialog组件绑定close方法为取消按钮方法
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者交互体验。本篇文章将详细讲解如何更改`el-dialog`关闭按钮的图标。 首先，让我们了解`el-dialog`的基本结构。`el-dialog`的...
element ui 对话框el-dialog关闭事件详解
08-27
`el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要在用户关闭对话框后执行某些清理工作时，如清空输入数据、恢复初始状态或者更新视图等。下面我们详细讲解 `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() {
【问题解决】-ElmentUI中dialog弹出窗关闭卡死崩溃问题解决
gjb760662328的博客
05-09 1797
elementui-弹窗关闭卡死
el -dialog 点击其他地方，对话框不会关闭
老段的CSDN的博客
10-10 498
:close-on-click-modal="false"写在el-dialog标签内
element-ui 点击dialog右上角关闭图标不关闭的问题
qq_35134066的博客
07-29 4010
网上一些人说不起效是因为 visible 属性没有添加 .sync 修饰符。 一般情况下是因为一个 before-close 属性，这个是关闭前的回调，会暂停dialog的关闭。 该回调接收一个 done 函数作为参数，必须在回调里执行 done() 才能关闭dialog。 如下所示，具体示例可以参考element官网，查看具体怎么使用。 参数 说明 类型 before-close 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog
el-dialog作为子组件使用(关闭报错解决方法）
weixin_43254676的博客
04-28 7686
el-dialog作为子组件使用(关闭报错解决方法）
el-dialog遇到的问题
qq_37120809的博客
12-15 2114
3.改上面的问题，把dialog组件自带的关闭按钮去掉了，属性 ：show-close="false"，我下意识想写成（show-close="false"但是会报错），测试又发现新问题：点击取消按钮可以清空form表单里原来的内容，但是点击空白处对话框也会关闭，此时里面内容不会清空；5.遗留问题：在el-table组件中点击编辑回显到dialog弹框里时，修改某条信息但不保存，关闭对话框后，table表格里的信息是修改后的，需要刷新后才能拿回真实的数据，目前是关闭对话框后重新调取接口；
dialog弹窗关不掉 vue_最佳实践：vue弹窗及滑块响应式
weixin_30350163的博客
01-03 641
下述为项目中弹窗/滑块统一处理方式汇总（下述已 el-dialog 为例）演示环境：https://eugvd.csb.app/Demo 地址：https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497DOM 结构方式1. (推荐1：直接注入数据「详情」) el-dialog 壳子在外，内容单...
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_69811594的博客
03-17 4919
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
el-dialog关闭按钮样式修改不影响其它el-dialog关闭按钮样式
最新发布
05-17
您可以通过给该 el-dialog 组件的关闭按钮设置独立的 class 名称，然后在 CSS 样式表中针对该 class 名称进行样式设置，以达到修改该关闭按钮样式不影响其它 el-dialog 组件关闭按钮样式的目的。 具体做法如下： 1. 在 el-dialog 的组件标签上添加一个新的属性 `:close-button-class`，将其值设置为你想要设置的独立 class 名称，例如： ```html <el-dialog :close-button-class="my-close-button-class"></el-dialog> ``` 2. 在 CSS 样式表中定义你设置的独立 class 名称对应的样式，例如： ```css .my-close-button-class { /* 在这里添加你想要设置的样式 */ } ``` 这样，你就可以通过设置独立的 class 名称来修改 el-dialog 的关闭按钮样式，而不会影响其它 el-dialog 组件的关闭按钮样式了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值