解决el-dilog标题+动态标题与标题大小不一问题(自定义)

html:

1、动态标题:

<el-dialog
            :title="`添加指定中奖人员${form.awardType==1?'(指定人员)':'(白名单)'}`"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="990px">
            弹框内容
           
        </el-dialog>

2、标题自定义 

<el-dialog
           
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="990px">
//使用slot="title"插槽
            <div slot="title" class="custom-box-title">
                添加指定中奖人员<span>{{form.awardType==1?'指定人员':'白名单'}}</span>
            </div>
             弹框内容
        </el-dialog>

js:

    data () {
        return {
 
            form: {
                awardType:this.$route.query.luckDrawIdx,//上个页面带过来的
           
            },
      
        }
    },

css:

//scss写法    
.custom-box-title{
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(36, 46, 66, 0.6); 
        span{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(36, 46, 66, 0.4);
            margin-left: 0.12rem;
        }
    }

效果图: