el-dialog更换顶部头部背景色样式
方法一:效果图:做法:在style里可以修改字体颜色背景色<el-dialog :visible.sync="dialogVisible"><div slot="title" class="header-title" :style="{'background': theme.pageTitleBgColor, 'color': 'white'}"><div style
·
方法一:
- 效果图:
- 做法:
在style里可以修改字体颜色背景色
<el-dialog :visible.sync="dialogVisible">
<div slot="title" class="header-title" :style="{'background': theme.pageTitleBgColor, 'color': 'white'}">
<div style="padding:15px 20px;">编辑框</div>
</div>
......
方法二:
- 效果图:
- 做法:
通过直接修改el-dialog样式的方式
<div class="dialog_diy">
<el-dialog :visible.sync="dialogVisible">
<div slot="title" class="header-title" :style="{'background':theme.pageTitleBgColor,'color':theme.pageTitleTextColor}">
<div style="padding:15px 20px;">编辑框</div>
</div>
<style lang="scss" scoped>
.dialog_diy{
::v-deep .el-dialog__wrapper { // eslint-disable-line
.el-dialog {
.el-dialog__body{
padding: 0px;
}
.el-dialog__header{
padding: 0px;
}
.el-dialog__headerbtn {
top: 5px;
right: 5px;
padding-top: 10px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff;
height: 30px;
width: 35px;
}
.el-dialog__headerbtn .el-dialog__close:hover {
color: gray;
}
}
}
}
</style>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献6条内容
所有评论(0)