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;
}
}
效果图: