目录
vue调整el-dialog中body样式
<el-dialog
:visible.sync="dialogVisible"
width="30%"
class="dialogClass"//设置弹框样式
:showClose="showClo"
:close-on-click-modal="false"
>
<div slot="title">
<b>系统提示</b>
</div>
<el-row>
<el-col :span="2">
<svg-icon icon-class="warning" style="height:3em;weight:8em" class="iconClass" />
</el-col>
<el-col :span="22" style="padding-top:12px">
<span style="font-size:16px;">
当前设备编码与设备型号不符，请检查！
</span>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button style="margin-left:7%"
type="primary"
plain
@click="dialogVisible = false;"
>确认</el-button>
</span>
</el-dialog>
.dialogClass .el-dialog__body {
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 20px;
color: #606266;
font-size: 14px;
}
.dialogClass .el-dialog__footer {
text-align: right;
}
/*注意此样式不可以放在scope属性下面,否则样式不生效*/
自定义el-dialog的样式
1、默认dialog的样式
居中对其的状态是这样的
2、项目需求是这样我们需要自定义的样式
上下边框，以及圆角：
3、代码修改属性部分
在项目中直接修改不生效，可以加上deep属性来穿透改变，因为vue项目中style样式中都有scoped的，所以也不会影响其他页面的内容
// 修改弹框边框圆角
/deep/.el-dialog.el-dialog--center {
border-radius: 8px;
}
// 去掉弹框内容的默认padding值
/deep/.el-dialog--center .el-dialog__body {
padding: 0px;
text-align: center;
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
