本文介绍如何在 Element UI 中自定义 el-dialog 右上角关闭按钮的图标，通过 CSS 替换背景图实现。同时提供使用 showClose 属性设为 false 来完全隐藏关闭按钮的方法，解决特定界面需求。
自定义 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
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 关闭按钮图标及隐藏方法的介绍完毕。如需了解更多相关内容，建议查阅本站过往文章或继续浏览后续内容，感谢支持。