Element UI 自定义 el-dialog 关闭按钮图标及隐藏方法

作者:组件花园时间:2026-10-23 20:21:18浏览:394

本文介绍如何在 Element UI 中自定义 el-dialog 右上角关闭按钮的图标,通过 CSS 替换背景图实现。同时提供使用 showClose 属性设为 false 来完全隐藏关闭按钮的方法,解决特定界面需求。

自定义 el-dialog 关闭按钮图标

首先展示最终实现的视觉效果。

自定义 el-dialog 关闭按钮图标

具体效果如下图所示。


<el-dialog title="对话框" :visible="true" @close="关闭事件()" @opened="打开事件()" class="想来点其他样式">

实现这一效果的核心在于添加特定的 CSS 样式。


.el-dialog__headerbtn {
 top: 8px !important;
 background: url('https://你路径资源的url图片') left no-repeat;
 background-size: cover;
}
.el-dialog__headerbtn i {
 content: '修改下面的font-size可以改变图片的大小';
 font-size: 25px;
 visibility: hidden;
}

隐藏 el-dialog 关闭按钮

此外,下面介绍如何移除 Element-UI 中 dialog 右上角的关闭按钮,具体操作如下。

近期在使用 Element-UI 的 Dialog 组件时,因业务需求需要移除右上角的关闭按钮,效果如图。

自定义 el-dialog 关闭按钮图标

经过搜索,找到了一种有效的实现方式,代码如下。


<el-dialog
 title=""
 :visible.sync="dialogVisible"
 :showClose="showClo" //主要是这个属性设为false即可
 width="600px"
 center>
 <span>这是一段信息</span>
</el-dialog>

export default {
 data() {
 return {
 showClo:false,
 }
 }
 }

关键在于设置 showClose 属性,将其值设为 false 即可生效。

该方法参考自:https://segmentfault.com/q/1010000012175677

总结。

至此,关于 Element UI 中修改 el-dialog 关闭按钮图标及隐藏方法的介绍完毕。如需了解更多相关内容,建议查阅本站过往文章或继续浏览后续内容,感谢支持。

作者最新文章