目录Vue调整el-dialog中body样式自定义el-dialog的样式1、默认dialog的样式2、项目需求是这样我们需要自定义的样式3、代码修改属性部分vue调整el-dia
<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;
}
居中对其的状态是这样的
上下边框,以及圆角:
在项目中直接修改不生效,可以加上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;
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue如何随心所欲调整el-dialog中body的样式
本文链接: https://www.lsjlt.com/news/150002.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0