vue-Dialog 自定义title样式
展示结果
vue代码
<el-dialog :title="title" :visible.sync="classifyOpen" width="500px" :showClose="false" class="aboutDialog">
<el-form :model="classifyForm" :rules="classifyRules">
<el-form-item label="区域名称" label-width="120px" prop="name">
<el-input v-model="classifyForm.name" style="" clearable placeholder="请输入区域名称" class="limited-width"></el-input>
</el-form-item>
<el-form-item label="区域级别" label-width="120px" prop="orderNum">
<el-input v-model="classifyForm.name" style="" clearable placeholder="请输入区域级别" class="limited-width"></el-input>
</el-form-item>
<el-form-item label="区域顺序" label-width="120px" prop="icon">
<el-input-number v-model="classifyForm.dictSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" label-width="120px">
<el-radio-group v-model="classifyForm.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" label-width="120px" prop="remark">
<el-input v-model="classifyForm.remark" clearable placeholder="请输入备注" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
js代码
export default {
data() {
// 弹出层标题
title: "",
// 是否显示弹出层
classifyOpen: false,
// 表单参数
classifyForm: {},
// 表单校验
classifyRules: {
name: [
{ required: true, message: '请输入区域名称', trigger: 'blur' }
],
},
}
}
css代码
<style scoped>
.aboutDialog >>> .el-dialog__body {
padding: 0px !important;
padding:15px !important;
}
.aboutDialog >>> .el-dialog__header {
padding: 10px 20px;
height: 45px;
line-height: 25px;
text-align: left;
background: #3378df;
border-bottom: solid 1px #3378df;
}
.aboutDialog >>> .el-dialog__title {
color: #fff;
font-size: 14px;
}
.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
.aboutDialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
color: #fff;
}
.aboutDialog >>> .el-dialog__headerbtn {
top: 13px;
}
.aboutDialog >>> .el-dialog__footer{
padding:10px 20px ;
border-top: solid 1px #3378df;
}
</style>