elementui更改el-dialog关闭按钮的图标d的示例代码
网络编程 发布日期：2025/10/31 浏览次数：1
正在浏览：elementui更改el-dialog关闭按钮的图标d的示例代码
先给大家展示效果图：
先上图
<el-dialog title="对话框" :visible="true" @close="关闭事件()" @opened="打开事件()" class="想来点其他样式">
主要是添加一下样式
.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;
}
PS：下面看下如何去除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
总结