feat(form): 统一表单组件样式并新增配置项
1. 新增标签字重、自动宽度上限、输入框边框/背景色等配置项 2. 统一ns-form、ns-newform和diy-form的输入框样式与默认值 3. 优化标签宽度计算逻辑，添加自动宽度上限防止布局溢出 4. 适配多端输入框样式，添加聚焦态交互效果
This commit is contained in:
@@ -371,10 +371,18 @@ export default {
|
||||
labelFixedWidth: 180,
|
||||
labelFontSize: 28,
|
||||
labelColor: '#1f2937',
|
||||
labelFontWeight: 600,
|
||||
labelAutoMaxWidth: 200, // auto 模式下 label 宽度上限（rpx），超过后 ellipsis 截断
|
||||
requiredColor: '#ef4444',
|
||||
checkedColor: '#ff4544',
|
||||
placeholderColor: '#ddd',
|
||||
placeholderFontSize: 28,
|
||||
// 输入框视觉增强（可由后端 form_config 覆盖）
|
||||
inputBorderColor: '#e5e7eb',
|
||||
inputBgColor: '#f9fafb',
|
||||
inputFocusBorderColor: '#ff4544',
|
||||
inputFocusBgColor: '#ffffff',
|
||||
labelFontWeight: 600,
|
||||
// 提交按钮
|
||||
submitColor: '#ffffff',
|
||||
submitBgColor: '#ff4544',
|
||||
@@ -444,6 +452,12 @@ export default {
|
||||
'--checked-color': cfg.checkedColor,
|
||||
'--placeholder-color': cfg.placeholderColor,
|
||||
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
|
||||
// 输入框视觉增强（边框 / 背景 / 聚焦 / label 字重）
|
||||
'--input-border-color': cfg.inputBorderColor,
|
||||
'--input-bg-color': cfg.inputBgColor,
|
||||
'--input-focus-border-color': cfg.inputFocusBorderColor,
|
||||
'--input-focus-bg-color': cfg.inputFocusBgColor,
|
||||
'--label-font-weight': cfg.labelFontWeight,
|
||||
'--submit-color': cfg.submitColor,
|
||||
'--submit-bg-color': cfg.submitBgColor,
|
||||
'--submit-margin-top': this.$util.rpx(cfg.submitMarginTop || 0),
|
||||
@@ -559,8 +573,13 @@ export default {
|
||||
if (len > maxChars) maxChars = len;
|
||||
});
|
||||
// 与后端公式一致：chars * (fontSize/2) * 1.1 + 12，单位 px → 转 rpx（×2）
|
||||
const widthPx = Math.max(40, maxChars * (fontSize / 2) * 1.1 + 12);
|
||||
this.maxLabelWidth = Math.round(widthPx * 2);
|
||||
let widthPx = Math.max(40, maxChars * (fontSize / 2) * 1.1 + 12);
|
||||
let widthRpx = Math.round(widthPx * 2);
|
||||
// auto 模式下加宽度上限：超长 title 撑爆布局时，按 labelAutoMaxWidth 截断（rpx）
|
||||
// 上限内 ellipsis 截断，保证控件区有足够空间；上限外也不会让 label 占满整行
|
||||
const maxWidthRpx = parseInt(this.config.labelAutoMaxWidth) || 200;
|
||||
if (widthRpx > maxWidthRpx) widthRpx = maxWidthRpx;
|
||||
this.maxLabelWidth = widthRpx;
|
||||
// 宽度变了，需要把全局 nameWidthStyle 重新合到每项 _labelStyle 里
|
||||
this.recomputeItemStyles();
|
||||
},
|
||||
@@ -961,6 +980,12 @@ export default {
|
||||
--submit-bg-color: #ff4544;
|
||||
--placeholder-color: #ddd;
|
||||
--placeholder-font-size: 28rpx;
|
||||
// 输入框视觉增强（边框 / 背景 / 聚焦 / label 字重）
|
||||
--input-border-color: #e5e7eb;
|
||||
--input-bg-color: #f9fafb;
|
||||
--input-focus-border-color: #ff4544;
|
||||
--input-focus-bg-color: #ffffff;
|
||||
--label-font-weight: 600;
|
||||
--show-row-divider: 1;
|
||||
|
||||
// 与后端 form-preview-wrap.no-divider-all 对齐：整组隐藏所有行分割线
|
||||
@@ -1012,13 +1037,13 @@ export default {
|
||||
&.vertical-layout {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: var(--label-gap, 16rpx);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1068,7 +1093,7 @@ export default {
|
||||
text-align: left;
|
||||
font-size: var(--item-label-font-size, var(--label-font-size, 28rpx));
|
||||
color: var(--item-label-color, var(--label-color, #1f2937));
|
||||
font-weight: 500;
|
||||
font-weight: var(--item-label-font-weight, var(--label-font-weight, 600));
|
||||
letter-spacing: 0.2rpx;
|
||||
|
||||
text {
|
||||
@@ -1136,49 +1161,105 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
// H5 端 <input> 被 uni-app 编译为 <uni-input> 自定义组件，
|
||||
// 真实 <input> 是其子节点，需要 ::v-deep 穿透 scoped 才能命中
|
||||
::v-deep input {
|
||||
font-size: var(--label-font-size, 28rpx);
|
||||
text-align: left;
|
||||
height: var(--input-height, 60rpx);
|
||||
border: none;
|
||||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||||
border-radius: var(--input-radius, 10rpx);
|
||||
line-height: var(--input-height, 60rpx);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
padding: 0 12rpx;
|
||||
background: var(--input-bg-color, #f9fafb);
|
||||
color: var(--label-color, #1f2937);
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
&:focus {
|
||||
background: transparent;
|
||||
background: var(--input-focus-bg-color, #ffffff);
|
||||
border-color: var(--input-focus-border-color, #ff4544);
|
||||
}
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: var(--placeholder-color, #ddd);
|
||||
font-size: var(--placeholder-font-size, 28rpx);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 非 H5 端（小程序 / 鸿蒙 / App）<input> 是直接原生元素，普通选择器即可
|
||||
input {
|
||||
font-size: var(--label-font-size, 28rpx);
|
||||
text-align: left;
|
||||
height: var(--input-height, 60rpx);
|
||||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||||
border-radius: var(--input-radius, 10rpx);
|
||||
line-height: var(--input-height, 60rpx);
|
||||
padding: 0 12rpx;
|
||||
background: var(--input-bg-color, #f9fafb);
|
||||
color: var(--label-color, #1f2937);
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
background: var(--input-focus-bg-color, #ffffff);
|
||||
border-color: var(--input-focus-border-color, #ff4544);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--placeholder-color, #ddd);
|
||||
font-size: var(--placeholder-font-size, 28rpx);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep textarea {
|
||||
font-size: var(--label-font-size, 28rpx);
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||||
border-radius: var(--input-radius, 10rpx);
|
||||
padding: 12rpx;
|
||||
background: var(--input-bg-color, #f9fafb);
|
||||
color: var(--label-color, #1f2937);
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
|
||||
&:focus {
|
||||
background: var(--input-focus-bg-color, #ffffff);
|
||||
border-color: var(--input-focus-border-color, #ff4544);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--placeholder-color, #ddd);
|
||||
font-size: var(--placeholder-font-size, 28rpx);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: var(--label-font-size, 28rpx);
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||||
border-radius: var(--input-radius, 10rpx);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
padding: 12rpx;
|
||||
background: var(--input-bg-color, #f9fafb);
|
||||
color: var(--label-color, #1f2937);
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
|
||||
|
||||
&:focus {
|
||||
background: transparent;
|
||||
background: var(--input-focus-bg-color, #ffffff);
|
||||
border-color: var(--input-focus-border-color, #ff4544);
|
||||
}
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: var(--placeholder-color, #ddd);
|
||||
font-size: var(--placeholder-font-size, 28rpx);
|
||||
|
||||
Reference in New Issue
Block a user