style(ns-form, ns-newform): 新增占位符字体大小配置项
1. 为两个表单组件新增placeholderFontSize配置项与对应CSS变量 2. 将输入框占位符字体大小从复用label字号改为独立配置 3. 适配小程序/鸿蒙原生占位符样式规则
This commit is contained in:
@@ -284,6 +284,7 @@
|
|||||||
requiredColor: '#ef4444',
|
requiredColor: '#ef4444',
|
||||||
checkedColor: '#ff4544',
|
checkedColor: '#ff4544',
|
||||||
placeholderColor: '#909399',
|
placeholderColor: '#909399',
|
||||||
|
placeholderFontSize: 28,
|
||||||
showRowDivider: true,
|
showRowDivider: true,
|
||||||
rowDividerColor: '#f0f0f0'
|
rowDividerColor: '#f0f0f0'
|
||||||
};
|
};
|
||||||
@@ -310,6 +311,7 @@
|
|||||||
requiredColor: pick('requiredColor', 'required_color'),
|
requiredColor: pick('requiredColor', 'required_color'),
|
||||||
checkedColor: pick('checkedColor', 'checked_color'),
|
checkedColor: pick('checkedColor', 'checked_color'),
|
||||||
placeholderColor: pick('placeholderColor', 'placeholder_color'),
|
placeholderColor: pick('placeholderColor', 'placeholder_color'),
|
||||||
|
placeholderFontSize: pick('placeholderFontSize', 'placeholder_font_size'),
|
||||||
showRowDivider: pick('showRowDivider', 'show_row_divider'),
|
showRowDivider: pick('showRowDivider', 'show_row_divider'),
|
||||||
rowDividerColor: pick('rowDividerColor', 'row_divider_color')
|
rowDividerColor: pick('rowDividerColor', 'row_divider_color')
|
||||||
};
|
};
|
||||||
@@ -364,6 +366,7 @@
|
|||||||
'--required-color': cfg.requiredColor,
|
'--required-color': cfg.requiredColor,
|
||||||
'--checked-color': cfg.checkedColor,
|
'--checked-color': cfg.checkedColor,
|
||||||
'--placeholder-color': cfg.placeholderColor,
|
'--placeholder-color': cfg.placeholderColor,
|
||||||
|
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
|
||||||
'--row-divider-color': cfg.rowDividerColor,
|
'--row-divider-color': cfg.rowDividerColor,
|
||||||
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
|
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
|
||||||
});
|
});
|
||||||
@@ -875,6 +878,7 @@
|
|||||||
--label-font-size: 28rpx;
|
--label-font-size: 28rpx;
|
||||||
--label-color: #1f2937;
|
--label-color: #1f2937;
|
||||||
--required-color: #ef4444;
|
--required-color: #ef4444;
|
||||||
|
--placeholder-font-size: 28rpx;
|
||||||
--checked-color: #ff4544;
|
--checked-color: #ff4544;
|
||||||
--placeholder-color: #909399;
|
--placeholder-color: #909399;
|
||||||
--row-divider-color: #f0f0f0;
|
--row-divider-color: #f0f0f0;
|
||||||
@@ -974,13 +978,20 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: transparent;
|
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 中都生效,
|
// placeholder-class 钩子:在鸿蒙原生 TextInput / WebView 中都生效,
|
||||||
// 限定在 .form-wrap 内避免污染全局 .placeholder / .color-tip
|
// 限定在 .form-wrap 内避免污染全局 .placeholder / .color-tip
|
||||||
.placeholder {
|
.placeholder {
|
||||||
color: var(--placeholder-color, #909399);
|
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);
|
line-height: var(--input-height, 60rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -373,6 +373,8 @@ export default {
|
|||||||
labelColor: '#1f2937',
|
labelColor: '#1f2937',
|
||||||
requiredColor: '#ef4444',
|
requiredColor: '#ef4444',
|
||||||
checkedColor: '#ff4544',
|
checkedColor: '#ff4544',
|
||||||
|
placeholderColor: '#ddd',
|
||||||
|
placeholderFontSize: 28,
|
||||||
// 提交按钮
|
// 提交按钮
|
||||||
submitColor: '#ffffff',
|
submitColor: '#ffffff',
|
||||||
submitBgColor: '#ff4544',
|
submitBgColor: '#ff4544',
|
||||||
@@ -440,6 +442,8 @@ export default {
|
|||||||
'--label-color': cfg.labelColor,
|
'--label-color': cfg.labelColor,
|
||||||
'--required-color': cfg.requiredColor,
|
'--required-color': cfg.requiredColor,
|
||||||
'--checked-color': cfg.checkedColor,
|
'--checked-color': cfg.checkedColor,
|
||||||
|
'--placeholder-color': cfg.placeholderColor,
|
||||||
|
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
|
||||||
'--submit-color': cfg.submitColor,
|
'--submit-color': cfg.submitColor,
|
||||||
'--submit-bg-color': cfg.submitBgColor,
|
'--submit-bg-color': cfg.submitBgColor,
|
||||||
'--submit-margin-top': this.$util.rpx(cfg.submitMarginTop || 0),
|
'--submit-margin-top': this.$util.rpx(cfg.submitMarginTop || 0),
|
||||||
@@ -954,6 +958,7 @@ export default {
|
|||||||
--submit-color: #ffffff;
|
--submit-color: #ffffff;
|
||||||
--submit-bg-color: #ff4544;
|
--submit-bg-color: #ff4544;
|
||||||
--placeholder-color: #ddd;
|
--placeholder-color: #ddd;
|
||||||
|
--placeholder-font-size: 28rpx;
|
||||||
--show-row-divider: 1;
|
--show-row-divider: 1;
|
||||||
|
|
||||||
// 与后端 form-preview-wrap.no-divider-all 对齐:整组隐藏所有行分割线
|
// 与后端 form-preview-wrap.no-divider-all 对齐:整组隐藏所有行分割线
|
||||||
@@ -1149,7 +1154,7 @@ export default {
|
|||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--placeholder-color, #ddd);
|
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 {
|
&::placeholder {
|
||||||
color: var(--placeholder-color, #ddd);
|
color: var(--placeholder-color, #ddd);
|
||||||
font-size: var(--label-font-size, 28rpx);
|
font-size: var(--placeholder-font-size, 28rpx);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user