目录
前言
解决之路
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中的默认样式,举一反三。以后各种各样的弹窗样式都可以定制了。