elementui更改el-dialog关闭按钮的图标d的示例代码
作者：danbing2226
这篇文章主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
先给大家展示效果图：
先上图
<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
总结
到此这篇关于elementui更改el-dialog关闭按钮的图标的文章就介绍到这了,更多相关elementui更改el-dialog关闭按钮的图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！