elementui更改el-dialog关闭按钮的图标d的示例代码

(编辑:jimmy 日期: 2024/12/26 浏览:2)

先给大家展示效果图:

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

elementui更改el-dialog关闭按钮的图标d的示例代码

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

<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

总结

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。