el-dialog更换顶部头部背景色样式_el-dialog背景色

方法一：

• 效果图：

• 做法：

在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>
          ......
1
2
3
4
5

方法二：

• 效果图：

• 做法：

通过直接修改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> 
1
2
3
4
5

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27