element-ui 点击dialog右上角关闭图标不关闭的问题

最新推荐文章于 2023-07-13 11:02:04 发布
最新推荐文章于 2023-07-13 11:02:04 发布
阅读量3.7k 收藏
点赞数 5
分类专栏： Vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35134066/article/details/119212322
版权

网上一些人说不起效是因为 visible 属性没有添加 .sync 修饰符。
一般情况下是因为一个 before-close 属性，这个是关闭前的回调，会暂停dialog的关闭。
该回调接收一个 done 函数作为参数，必须在回调里执行 done() 才能关闭dialog。
如下所示，具体示例可以参考element官网，查看具体怎么使用。

参数说明类型
before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog
神影天初
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 }, 以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
work-notes（12）：如何二次封装 Element UI 的 dialog 弹窗，发现弹窗只能点击触发一次是什么原因，如何解决弹窗只能触发一次的问题？
jinzai9976的博客
05-15 2089
时间：2022-05-15 文章目录问题描述问题分析1、如何二次封装 element UI 的 dialog 弹窗？2、实现过程（1）在 script 标签 中 props 传入值（2）绑定到 dialog 标签内主要结构：个人例子：解释3、弹窗为什么只能点击触发一次，第二次之后都没有反应？4、实现过程（1）在调用的页面写一个 close 函数传入；个人例子（2）在子组件内部进行绑定具体内部调用个人例子 问题描述 前些天，公司要求制作一个私库，并且是在 element UI 的组件上进行二次封装，所以引生出
vue element-ui 有关dialog组件的封装使用，正确的关闭dialog窗体
q1025387665a的博客
03-18 1781
前言： 这个问题的现象是当你封装dialog组件时，传入prop去控制他的显示与否，点击关闭按钮关闭不了（更加具体的描述就是，这个dialog窗体会在你关闭之后再次弹出来）的解决方法。 首先这个现象产生的原因应该是显而易见的，你能在当前的组件把dialog窗体关闭，但父组件监听到这个dialog组件应该被渲染，所以他又弹出来了。这里解决这个正确关闭的关键应该是在于数据的沟通。 这里面其实重点应该关注的是一个修饰符，.sync 官网解释如上，再结合自身的理解，双向绑定意味着这个时候，当你在子组件修改
【bug】关于Vue封装el-dialog对话框关闭无反应问题
花椒和蕊的博客
11-19 4054
封装dialog弹窗
Element-UI的dialog弹窗的右上角的叉号不能关闭弹窗
weixin_45724648的博客
08-18 3975
<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" ...
element-ui 弹窗框 X点击不能取消
qq_57980267的博客
03-08 3335
在做项目过程中，弹窗框的运用不少于表格表单，今天就在写弹窗的时候出现了bug，点击弹窗的X不能关闭，其实很简单 :before-close="handleClosee" :before-close 关闭前的回调，会暂停 Dialog 的关闭, 加上这个方法，这样这个问题就解决了。 ...
点击el-dialog关闭按钮无效
Caoshilong1的博客
07-13 1780
点击el-dialog关闭按钮无效
vue中父子组件使用和dialog不执行before-close
qq_36022463的博客
01-20 2172
父子组件传递 :is="xxx" 渲染的组件名字 @closeDialog="xxx" 传过去的方法 动态加载组件： 上面导入的map： 遇到的问题： 子组件的dialog的状态是父组件传递过去的，在修改子组件的状态的时候需要将父组件的状态也修改掉，不然改动其他组件也会重新加载这个 dialog （这个我也不知道是为什么，改动其他的也会重新加载component）。。 但是在子组件dialog 中 before-close 指定的函数不执行(也不知道为什么不执行): 解决办法： 监听这个 dialog
Vue+Element组件el-dialog，点击弹框外不取消弹框和去掉x号
qq_42732038的博客
12-30 4378
html部分 <el-dialog :close-on-click-modal="close_modal" :showClose="false" > js部分 data() { return { close_modal:false } } 效果图
Element-ui css非网络引用，
07-26
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> Button Try Element 搜索 <!-- import Vue before Element --> [removed][removed] <!-- import JavaScript --> [removed][removed] [removed] new Vue({ el: '#app', data: function() { return { visible: false } } }) </script
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vscode报错：找不到.d.ts中定义的名称
qq_35134066的博客
11-19 8143
假如你在写ts的类型时报错：找不到名称 xxx，并且你已经在types或者typings目录中定义好了。那你应该检查你的tsconfig.json的include字段。 include数组应该包含所有的你写了ts的文件。 比如你的include如下： { "include": [ "src/**/*.ts", "src/**/*.d.ts", "types/**/*.d.ts" ] } 这时你在<project>/build/test.ts文件中使用了ty
vue监听路由
qq_35134066的博客
12-06 3470
vue监听路由两种方式监听路由vue2监听路由vue3组合式api监听路由 两种方式监听路由 一种是使用vue2的写法，还有一种是组合式api的写法。 vue2监听路由 export default defineComponent({ watch: { $route: { handler: (val, oldVal) => { console.log(val); }, immediate: true, }, }, }); 这
vue3简单处理全屏
qq_35134066的博客
12-02 2031
处理全屏1. 尝试fullscreenchange事件2. 使用keydown事件3. 最后的收尾处理 1. 尝试fullscreenchange事件 // script setup ts import { onBeforeUnmount, ref } from "vue"; const isSupport = document.fullscreenEnabled; const isFullscreen = ref(false); const handleFullscreenchange = () =&g
Vue初始渲染的过渡
qq_35134066的博客
07-09 564
初始渲染就是在页面刚出现或者刷新的时候实现一些过渡效果，而且默认状态肯定不能是隐藏的，否则无法使用初始渲染。 若要使用初始渲染，必须给transition添加 appear attribute或者v-on:appear 钩子 <transition appear> ... </transition> <transition v-on:appear="customAppearHook"> ... </transition> 初始渲染默认和进入过渡一样。
Vue基础(一)安装
qq_35134066的博客
08-26 156
这里主要涉及Vue核心的一些功能, 对 vue 的其他生态插件不作为重点. Vue的学习路线更加简单, 需要html, css及 javascript 作为基础就可以了. 对于新手及小型项目来说, 直接引入vue脚本就够了 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 在用 Vue 构建大型应用时推荐使用 NPM 安装, 这里就需要涉及到 Node 的相关知识了 # 最新稳定版
element ui 对话框如何去除右上角的图标
最新发布
09-20
### 回答1： 可以通过设置 `show-close` 属性为 `false` 来去除 Element UI 对话框右上角的关闭图标。例如： ```html <el-dialog title="对话框标题" :visible.sync="dialogVisible" :show-close="false"> <!-- 对话框内容 --> </el-dialog> ``` ### 回答2： Element UI 对话框右上角的图标可以通过修改其属性来去除。具体操作如下： 1. 在对话框组件中添加 `:show-close="false"` 属性，表示不显示右上角的关闭图标。 例如： ```html <el-dialog :show-close="false"> <!-- 对话框内容 --> </el-dialog> ``` 2. 通过样式修改去除关闭图标。 可以通过给对话框组件的容器添加自定义类名，然后通过 CSS 样式来隐藏关闭图标。 例如： ```html <el-dialog class="custom-dialog"> <!-- 对话框内容 --> </el-dialog> ``` 然后在样式表中添加如下样式： ```css .custom-dialog .el-dialog__headerbutton { display: none; } ``` 以上两种方法都可以去除 Element UI 对话框右上角的图标。根据需要选择相应的方法进行实现。 ### 回答3： Element UI 对话框组件默认右上角有一个关闭图标，用于关闭对话框。如果想要去除这个默认的关闭图标，可以通过自定义样式来实现。 首先，在对话框组件上添加一个`custom-class`属性，用于自定义样式的类名。例如：`<el-dialog custom-class="no-close-icon">` 然后在 CSS 中定义`.no-close-icon`类的样式，将关闭按钮的样式属性设置为`display: none;`，即隐藏关闭按钮。例如： ``` .no-close-icon .el-dialog__header .el-dialog__headerbtn { display: none; } ``` 通过以上操作，就可以实现去除 Element UI 对话框右上角的图标。总结起来，就是给对话框组件添加一个自定义样式类名，并在 CSS 中将关闭按钮的样式设置为不显示。这样就可以达到去除关闭图标的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值