java对话框的关闭按钮_elementui更改el-dialog关闭按钮的图标d的示例代码

本文展示了如何在Element-UI的对话框组件el-dialog中更改关闭按钮的图标,通过设置CSS样式和利用showClose属性实现关闭按钮的隐藏。提供了具体的代码示例,包括如何设置背景图片和调整字体大小,以及如何去掉对话框的关闭按钮。
摘要由CSDN通过智能技术生成

先给大家展示效果图:

d5c687008d337d45e2434e822b068617.png

先上图

主要是添加一下样式

.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对话框,因为需求需要去掉右上角的关闭按钮,如图所示:

d1c614d3277a38d72f4d7b774253ab32.png

最后在网上找到了一个方法,直接上代码

title=""

:visible.sync="dialogVisible"

:showClose="showClo" //主要是这个属性设为false即可

width="600px"

center>

这是一段信息

export default {

data() {

return {

showClo:false,

}

}

}

其中主要的就是showClose属性,设置为false即可

方法来源:https://segmentfault.com/q/1010000012175677

总结

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值