elementui更改el-dialog关闭按钮的图标d的示例代码
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
先给大家展示效果图:
先上图
<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
总结
下一篇:vue 实现根据data中的属性值来设置不同的样式