【element优化经验】el-dialog修改title样式

目录

前言

解决之路

1.把默认的×这个图标隐藏，官方的api有这个属性：showClose值设置false.

2.title插槽定制：左边定制标题，右边定制按钮区域。

3.背景颜色修改：默认title是有padding的需要把它重写调，然后加上背景颜色。

总结

​编辑

以上就是今天的分享，欢迎关注我，点赞评论！~

前言

近日，做需求遇到UI要求改造弹框的样式，默认的样式标题+关闭的X无法满足要求。

UI设计的是：

和产品和设计师经过激烈的讨论

&……#@@￥……*（）%……%。。。

产品说这样内容多还要往下滚动才能看到按钮呀，

点击X和点击取消功能重复了呀，

设计师说这样美观好看呀…

…@%&^^&*&*(*(*()*)@@#$*()%&*…………

无果，她们就是要这样的按钮在上方的。所以，得解决呀。

解决之路

1.把默认的×这个图标隐藏，官方的api有这个属性：showClose值设置false.

2.title插槽定制：左边定制标题，右边定制按钮区域。

<el-dialog :closeOnClickModal="$store.state.isFALSE" :title="$t('pageinfo.auditDetail')" :showClose="false" :visible.sync="dialogShow" left :before-close="dialogClose" width="650px" class="zkDialog">
 
		<template slot="title">
			<div class='zkTitle'>
				<div class="title-name">{{$t('pageinfo.auditDetail')}}</div>
				<el-button type="primary" @click="dialogClose">{{$t('CommonBtn.Close')}}</el-button>
			</div>
		</template>
 
<div>……</div>    
 
</el-dialog>复制

3.背景颜色修改：默认title是有padding的需要把它重写调，然后加上背景颜色。

/*修改dialog默认样式: ①dialog添加class名zkDialog，②取消显示×关闭，③新增slot="title" */
	.zkDialog{
		/deep/ .el-dialog__header{
			padding: 0 !important;
		}
		.zkTitle{
			background: #eee;
			border-radius: 4px;
			padding: 20px;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
 
			.title-name{
				font-size: 24px;
				color: #000000;
			}
		}
	}复制

总结

本次，我们通过slot重写title，并且通过样式修改了element-ui中dialog中的默认样式，举一反三。以后各种各样的弹窗样式都可以定制了。

以上就是今天的分享，欢迎关注我，点赞评论！~