el-dialog下面弄个线
时间: 2023-10-02 07:03:36 浏览: 94
【JavaScript源代码】element-ui 弹窗组件封装的步骤.docx
您可以通过在`el-dialog`组件下面添加一个`<div>`元素,并给它设置一个边框样式来实现添加一条线的效果。以下是一个示例代码:
```html
<template>
<el-dialog title="对话框标题" :visible="dialogVisible" width="30%">
<div class="dialog-content">
<!-- 对话框内容 -->
</div>
<div class="line"></div> <!-- 添加的线 -->
<span slot="footer" class="dialog-footer">
<!-- 对话框底部按钮 -->
</span>
</el-dialog>
</template>
<style>
.dialog-content {
/* 对话框内容的样式 */
}
.line {
width: 100%;
height: 1px;
background-color: #ccc;
margin-top: 10px;
margin-bottom: 10px;
}
.dialog-footer {
/* 对话框底部按钮的样式 */
}
</style>
```
您可以根据需要自定义`line`类的样式,例如调整宽度、高度、背景颜色等。
阅读全文