Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(ns-form, ns-newform): 新增占位符字体大小配置项

Browse Source 
1. 为两个表单组件新增placeholderFontSize配置项与对应CSS变量
2. 将输入框占位符字体大小从复用label字号改为独立配置
3. 适配小程序/鸿蒙原生占位符样式规则
This commit is contained in:
ZF Sun
2026-07-17 16:14:25 +08:00
parent 70c9c49b94
commit bb0adb0542
2 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/ns-form/ns-form.vue
View File

@@ -284,6 +284,7 @@
requiredColor: '#ef4444',
checkedColor: '#ff4544',
placeholderColor: '#909399',
placeholderFontSize: 28,
showRowDivider: true,
rowDividerColor: '#f0f0f0'
};
@@ -310,6 +311,7 @@
requiredColor: pick('requiredColor', 'required_color'),
checkedColor: pick('checkedColor', 'checked_color'),
placeholderColor: pick('placeholderColor', 'placeholder_color'),
placeholderFontSize: pick('placeholderFontSize', 'placeholder_font_size'),
showRowDivider: pick('showRowDivider', 'show_row_divider'),
rowDividerColor: pick('rowDividerColor', 'row_divider_color')
};
@@ -364,6 +366,7 @@
'--required-color': cfg.requiredColor,
'--checked-color': cfg.checkedColor,
'--placeholder-color': cfg.placeholderColor,
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
'--row-divider-color': cfg.rowDividerColor,
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
});
@@ -875,6 +878,7 @@
--label-font-size: 28rpx;
--label-color: #1f2937;
--required-color: #ef4444;
--placeholder-font-size: 28rpx;
--checked-color: #ff4544;
--placeholder-color: #909399;
--row-divider-color: #f0f0f0;
@@ -974,13 +978,20 @@
box-sizing: border-box;
padding: 0;
background: transparent;
// 原生 placeholder 样式（WebView / H5 生效；小程序/鸿蒙的 placeholder
// 通过 placeholder-class="placeholder" 钩子走 .placeholder 规则）
&::placeholder {
color: var(--placeholder-color, #909399);
font-size: var(--placeholder-font-size, 28rpx);
}
}
// placeholder-class 钩子：在鸿蒙原生 TextInput / WebView 中都生效，
// 限定在 .form-wrap 内避免污染全局 .placeholder / .color-tip
.placeholder {
color: var(--placeholder-color, #909399);
font-size: var(--label-font-size, 28rpx);
font-size: var(--placeholder-font-size, 28rpx);
line-height: var(--input-height, 60rpx);
}

9
components/ns-newform/ns-newform.vue
View File

@@ -373,6 +373,8 @@ export default {
labelColor: '#1f2937',
requiredColor: '#ef4444',
checkedColor: '#ff4544',
placeholderColor: '#ddd',
placeholderFontSize: 28,
// 提交按钮
submitColor: '#ffffff',
submitBgColor: '#ff4544',
@@ -440,6 +442,8 @@ export default {
'--label-color': cfg.labelColor,
'--required-color': cfg.requiredColor,
'--checked-color': cfg.checkedColor,
'--placeholder-color': cfg.placeholderColor,
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
'--submit-color': cfg.submitColor,
'--submit-bg-color': cfg.submitBgColor,
'--submit-margin-top': this.$util.rpx(cfg.submitMarginTop || 0),
@@ -954,6 +958,7 @@ export default {
--submit-color: #ffffff;
--submit-bg-color: #ff4544;
--placeholder-color: #ddd;
--placeholder-font-size: 28rpx;
--show-row-divider: 1;
// 与后端 form-preview-wrap.no-divider-all 对齐：整组隐藏所有行分割线
@@ -1149,7 +1154,7 @@ export default {
&::placeholder {
color: var(--placeholder-color, #ddd);
font-size: var(--label-font-size, 28rpx);
font-size: var(--placeholder-font-size, 28rpx);
}
}
@@ -1174,7 +1179,7 @@ export default {
&::placeholder {
color: var(--placeholder-color, #ddd);
font-size: var(--label-font-size, 28rpx);
font-size: var(--placeholder-font-size, 28rpx);
}
}