当前位置: 移动技术网 > IT编程>开发语言>JavaScript > elementui更改el-dialog关闭按钮的图标d的示例代码

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

2020年08月16日  | 移动技术网IT编程  | 我要评论
先给大家展示效果图:先上图<el-dialog title="对话框" :visible="true" @close="关闭事件()" @opened="打开事件()" class="想来点其他

先给大家展示效果图:

在这里插入图片描述

先上图

<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关闭按钮的图标内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网