el-dialog关闭按钮样式
时间: 2023-10-04 14:11:53 浏览: 208
关闭按钮demo
4星 · 用户满意度95%
要修改el-dialog关闭按钮的样式,可以参考以下方法:
1. 根据引用和引用的内容,在使用Dialog和MessageBox弹框的地方直接添加类名"oe-dialog-btn"即可实现样式修改。例如:
```html
<el-dialog title="对话框" visible=true close=关闭事件() opened=打开事件() class="oe-dialog-btn">
<!-- 弹窗内容 -->
</el-dialog>
```
2. 参考引用中的核心代码,可以自定义样式来修改el-dialog关闭按钮的外观。可以在样式文件中添加以下代码:
```css
.el-dialog__headerbtn {
background: url("~/assets/images/close-dialog.png");
background-size: cover;
height: 20px;
width: 20px;
i {
display: none;
/* 在这里隐藏弹窗默认的关闭图标 */
}
}
```
其中,将`background`属性设置为自定义的关闭按钮图片的路径,`background-size`属性用于控制图片的大小,`i`元素可以用来隐藏弹窗默认的关闭图标。
以上两种方法都可以实现el-dialog关闭按钮样式的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
阅读全文