首页 前端知识 【element优化经验】el-dialog修改title样式

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

2024-05-12 00:05:42 前端知识 前端哥 422 209 我要收藏

目录

前言

解决之路

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中的默认样式,举一反三。以后各种各样的弹窗样式都可以定制了。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8265.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!