如何修改ElementUI中el-dialog组件关闭按钮的图标样式？

本文共计338个文字，预计阅读时间需要2分钟。

首先展示效果图：+上图+el-dialog+title=对话框+:visible=true+@close=关闭事件()+@opened=打开事件()+class=想点其他样式+.el-dialog__headerbtn+{+top: 8px !important;+}

主要添加以下样式：+el-dialog__headerbtn+{+top: 8px !important;+}

先给大家展示效果图：

先上图

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

主要是添加一下样式

.el-dialog__headerbtn { top: 8px !important; background: url('你路径资源的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即可

方法来源：segmentfault.com/q/1010000012175677

总结

到此这篇关于elementui更改el-dialog关闭按钮的图标的文章就介绍到这了,更多相关elementui更改el-dialog关闭按钮的图标内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！