style&feat: 优化表单提示语与提交按钮样式
1. 调整默认提示语字号从24rpx改为32rpx,颜色改为纯黑,背景设为透明 2. 新增提交按钮顶部外边距配置项,支持自定义表单与按钮间距 3. 同步更新diy-form组件的提示语样式与提交按钮外层布局
This commit is contained in:
@@ -95,8 +95,8 @@ export default {
|
|||||||
const cfg = this.mergedFormConfig || {};
|
const cfg = this.mergedFormConfig || {};
|
||||||
const style = {
|
const style = {
|
||||||
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.tipPaddingX, 14)}rpx`,
|
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.tipPaddingX, 14)}rpx`,
|
||||||
'font-size': `${this._num(cfg.tipFontSize, 24)}rpx`,
|
'font-size': `${this._num(cfg.tipFontSize, 32)}rpx`,
|
||||||
'color': cfg.tipColor || '#666666',
|
'color': cfg.tipColor || '#000000',
|
||||||
'background-color': cfg.tipBgColor || 'transparent'
|
'background-color': cfg.tipBgColor || 'transparent'
|
||||||
};
|
};
|
||||||
// 仅在配置了 tipBorderColor 时添加底线,避免 transparent 占位仍增加 2rpx 高度
|
// 仅在配置了 tipBorderColor 时添加底线,避免 transparent 占位仍增加 2rpx 高度
|
||||||
@@ -105,10 +105,11 @@ export default {
|
|||||||
}
|
}
|
||||||
return this.$util.objToStyle(style);
|
return this.$util.objToStyle(style);
|
||||||
},
|
},
|
||||||
// 提交按钮外层:与后端 .form-preview-submit 对齐(padding: row-padding-y form-padding-x;background: form-bg-color)
|
// 提交按钮外层:与后端 .form-preview-submit 对齐(margin-top + padding: row-padding-y form-padding-x;background: form-bg-color)
|
||||||
submitWrapStyle() {
|
submitWrapStyle() {
|
||||||
const cfg = this.mergedFormConfig || {};
|
const cfg = this.mergedFormConfig || {};
|
||||||
return this.$util.objToStyle({
|
return this.$util.objToStyle({
|
||||||
|
marginTop: `${this._num(cfg.submitMarginTop, 0)}rpx`,
|
||||||
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.formPaddingX, 14)}rpx`,
|
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.formPaddingX, 14)}rpx`,
|
||||||
'background-color': cfg.formBgColor || '#ffffff'
|
'background-color': cfg.formBgColor || '#ffffff'
|
||||||
});
|
});
|
||||||
@@ -187,6 +188,7 @@ export default {
|
|||||||
// 提交按钮尺寸:宽度百分比 + 尺寸预设(与后端 design.js 对齐)
|
// 提交按钮尺寸:宽度百分比 + 尺寸预设(与后端 design.js 对齐)
|
||||||
submitWidthPercent: pick('submitWidthPercent', 'submit_width_percent'),
|
submitWidthPercent: pick('submitWidthPercent', 'submit_width_percent'),
|
||||||
submitSize: pick('submitSize', 'submit_size'),
|
submitSize: pick('submitSize', 'submit_size'),
|
||||||
|
submitMarginTop: pick('submitMarginTop', 'submit_margin_top'),
|
||||||
// 提示语
|
// 提示语
|
||||||
tipFontSize: pick('tipFontSize', 'tip_font_size'),
|
tipFontSize: pick('tipFontSize', 'tip_font_size'),
|
||||||
tipColor: pick('tipColor', 'tip_color'),
|
tipColor: pick('tipColor', 'tip_color'),
|
||||||
@@ -347,8 +349,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-submit-wrap {
|
.form-submit-wrap {
|
||||||
// 外层:与后端 .form-preview-submit 对齐(padding-y + form-padding-x + form-bg-color + flex 居中)
|
// 外层:与后端 .form-preview-submit 对齐(margin-top + padding-y + form-padding-x + form-bg-color + flex 居中)
|
||||||
// padding/background 由 submitWrapStyle 内联写入
|
// margin-top/padding/background 由 submitWrapStyle 内联写入
|
||||||
// display: flex + justify-content: center 是让宽度小于 100% 的按钮水平居中的关键
|
// display: flex + justify-content: center 是让宽度小于 100% 的按钮水平居中的关键
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -427,10 +427,11 @@ export default {
|
|||||||
// 提交按钮
|
// 提交按钮
|
||||||
submitColor: '#ffffff',
|
submitColor: '#ffffff',
|
||||||
submitBgColor: '#ff4544',
|
submitBgColor: '#ff4544',
|
||||||
|
submitMarginTop: 0, // 提交按钮顶部外边距(rpx):调整表单与按钮之间的距离
|
||||||
// 提示语
|
// 提示语
|
||||||
tipFontSize: 24,
|
tipFontSize: 32,
|
||||||
tipColor: '#666666',
|
tipColor: '#000000',
|
||||||
tipBgColor: '#ffffff'
|
tipBgColor: 'transparent'
|
||||||
};
|
};
|
||||||
// 全局配置(中间优先级)
|
// 全局配置(中间优先级)
|
||||||
const globalCfg = this.formConfig || {};
|
const globalCfg = this.formConfig || {};
|
||||||
@@ -492,6 +493,7 @@ export default {
|
|||||||
'--checked-color': cfg.checkedColor,
|
'--checked-color': cfg.checkedColor,
|
||||||
'--submit-color': cfg.submitColor,
|
'--submit-color': cfg.submitColor,
|
||||||
'--submit-bg-color': cfg.submitBgColor,
|
'--submit-bg-color': cfg.submitBgColor,
|
||||||
|
'--submit-margin-top': `${cfg.submitMarginTop || 0}rpx`,
|
||||||
// 分割线显隐
|
// 分割线显隐
|
||||||
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
|
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user