fix(styles): 修复必填星号首行对齐问题
- 调整 `.is-required .el-form-item__label` 采用 `align-items: normal` 实现星号首行对齐 - 覆盖 Element Plus 固定高度 `height: 32px` 为 `height: auto` 以支持内容自适应高度 - 保持 `align-self: center` 使单行 label 与输入框垂直居中,折行时星号贴首行 - 修改星号 `::before` 的高度为 `auto` 并继承行高,保证首行基线一致 - 修复多行 label 下星号因 flex 居中导致位置偏移的问题 - 兼容 label 多种位置(右、左、顶)及多行折行场景,影响 project-apply 等表单页
This commit is contained in:
@@ -3,3 +3,12 @@
|
|||||||
- 根因:`element-ui.scss` 中 `.el-form-item--label-right .el-form-item__label { align-items:center }` 使 inline-flex label 的星号 `::before`(独立 flex 子项)在多行折行时被垂直居中。
|
- 根因:`element-ui.scss` 中 `.el-form-item--label-right .el-form-item__label { align-items:center }` 使 inline-flex label 的星号 `::before`(独立 flex 子项)在多行折行时被垂直居中。
|
||||||
- 修复:label 改 `align-self:center`(整体仍随行垂直居中)+ `align-items:flex-start`(星号/文字首行齐平),覆盖 label-right/left/top 三种位置;旧 inline-block 注释已修正。
|
- 修复:label 改 `align-self:center`(整体仍随行垂直居中)+ `align-items:flex-start`(星号/文字首行齐平),覆盖 label-right/left/top 三种位置;旧 inline-block 注释已修正。
|
||||||
- 影响页面:project-apply 独立表单页等所有多行 label 场景(弹窗内 `white-space:nowrap` 不受影响)。
|
- 影响页面:project-apply 独立表单页等所有多行 label 场景(弹窗内 `white-space:nowrap` 不受影响)。
|
||||||
|
|
||||||
|
## 必填星号首行对齐:改用 align-items: normal(stretch 方案)
|
||||||
|
- 最终写法(`src/styles/element-ui.scss`):`.is-required .el-form-item__label { align-self:center; align-items:normal; }` + `::before { display:inline-block; height:auto; line-height:inherit; margin-right:4px }`。
|
||||||
|
- 原理:stretch 让星号盒子在「换行时」被拉伸到 label 全高、内容从顶部排布 → 贴首行;单行时盒子=一行高,视觉不变(比 flex-start 更贴合「只换行才生效」)。
|
||||||
|
- 前提:::before 高度必须 auto 且继承行高;label 不能是 固定 height + 等高 line-height,否则退化成居中,需 JS 判行数加 class。
|
||||||
|
|
||||||
|
## 星号方案补丁(关键)
|
||||||
|
- EP 的 `.el-form-item__label` 写死 `height:32px; line-height:32px`(项目只覆盖了 line-height:14px),导致 stretch 方案文字顶到 32px 盒子顶部、单行不居中。
|
||||||
|
- 修复:`.is-required .el-form-item__label { height:auto; align-self:center; align-items:normal }`——height:auto 收缩到内容高 + align-self:center 行内居中 + normal(stretch) 仅换行时星号贴首行。
|
||||||
|
|||||||
+17
-14
@@ -1045,31 +1045,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item--default .el-form-item__label {
|
.el-form-item--default .el-form-item__label {
|
||||||
//line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
// ============ 必填星号 * 与 label 首行齐平(全局) ============
|
.el-form-item--label-right .el-form-item__label {
|
||||||
// label 为 inline-flex,星号 ::before 与文字是两个独立 flex 子项;
|
align-items: center;
|
||||||
// 多行折行 label 若 align-items: center,星号会被垂直居中到第二行位置。
|
}
|
||||||
// align-items: flex-start 让星号与文字首行齐平;
|
// ============ 必填星号 * 与 label 首行齐平(仅换行时生效) ============
|
||||||
// align-self: center 让 label 整体不随表单行(32px)拉伸,单行 label 仍与输入框垂直居中,视觉不变。
|
// label 为 inline-flex,星号 ::before 与文字是两个独立 flex 子项。
|
||||||
.el-form-item--label-right .el-form-item__label,
|
// align-items: normal(= stretch):单行时星号盒子 = 一行高,位置不变;
|
||||||
.el-form-item--label-left .el-form-item__label,
|
// 折行后星号盒子被拉伸到 label 全高,但其内部按 line-height 从顶部排布 → 星号停在第一行。
|
||||||
.el-form-item--label-top .el-form-item__label {
|
// height: auto 覆盖 Element Plus 写死的 32px,让 label 收缩到内容高;
|
||||||
|
// align-self: center 再让收缩后的 label 在表单行内垂直居中(单行与输入框对齐)。
|
||||||
|
.is-required .el-form-item__label {
|
||||||
|
height: auto;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
align-items: flex-start;
|
align-items: normal;
|
||||||
}
|
}
|
||||||
.el-form-item--default {
|
.el-form-item--default {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 辅助:星号跟随 label 行高,保证与首行文字基线一致(单行/多行通用)。
|
// 配套:星号必须保持「高度 auto + 继承行高」,stretch 才会按首行排布;
|
||||||
// 注:真正的首行对齐由上方 .el-form-item__label 的 align-items: flex-start 完成;
|
// 写死 height 或 line-height 与 height 相等时效果会退化成居中。
|
||||||
// 客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。
|
// 注:客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。
|
||||||
.el-form-item.is-required .el-form-item__label::before {
|
.el-form-item.is-required .el-form-item__label::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
height: auto;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
margin-top: 2px !important;
|
|
||||||
}
|
}
|
||||||
//.el-form-item {
|
//.el-form-item {
|
||||||
// margin-bottom: 15px !important;
|
// margin-bottom: 15px !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user