el-dialog 标题加下划线
时间: 2023-10-05 12:08:51 浏览: 169
对话框 标题栏
对于 el-dialog 组件,可以通过自定义样式来实现标题加下划线的效果。你可以使用以下步骤来实现:
1. 首先,在使用 el-dialog 组件的地方,给 el-dialog 添加一个自定义 class,例如 "dialog-with-underline"。
2. 然后,在你的样式文件(通常是一个 CSS 或 SCSS 文件)中,为这个自定义 class 添加样式规则。你可以使用伪元素 ::after 来创建下划线效果。
例如,假设你的自定义 class 是 "dialog-with-underline",则可以添加以下样式:
```css
.dialog-with-underline .el-dialog__header {
position: relative;
}
.dialog-with-underline .el-dialog__header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000; /* 下划线的颜色 */
}
```
3. 最后,在 el-dialog 组件中添加自定义 class "dialog-with-underline"。
例如:
```html
<el-dialog class="dialog-with-underline">
<!-- 对话框的内容 -->
</el-dialog>
```
这样就可以实现 el-dialog 标题加下划线的效果了。记得根据你的需求调整样式中的颜色、高度等属性。
阅读全文