refactor(diy-form): use objToStyle to format style objects

统一使用 $util.objToStyle 方法处理样式对象,简化样式代码编写,保持代码风格一致
This commit is contained in:
2026-06-12 08:27:03 +08:00
parent 39ab70510c
commit 87fbda698c

View File

@@ -69,27 +69,27 @@ export default {
}, },
// Banner 容器左右内边距(与后端 .form-preview-banner padding-x 对齐) // Banner 容器左右内边距(与后端 .form-preview-banner padding-x 对齐)
bannerStyle() { bannerStyle() {
return { return this.$util.objToStyle({
padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx` padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx`
}; });
}, },
// 提示语样式:padding-x、font-size、color、bg-color(与后端 .form-preview-tip 对齐) // 提示语样式:padding-x、font-size、color、bg-color(与后端 .form-preview-tip 对齐)
tipStyle() { tipStyle() {
const cfg = this.mergedFormConfig || {}; const cfg = this.mergedFormConfig || {};
return { return this.$util.objToStyle({
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, 24)}rpx`,
'color': cfg.tipColor || '#666666', 'color': cfg.tipColor || '#666666',
'background-color': cfg.tipBgColor || 'transparent' 'background-color': cfg.tipBgColor || 'transparent'
}; });
}, },
// 提交按钮外层:与后端 .form-preview-submit 对齐(padding: row-padding-y form-padding-x;background: form-bg-color) // 提交按钮外层:与后端 .form-preview-submit 对齐(padding: row-padding-y form-padding-x;background: form-bg-color)
submitWrapStyle() { submitWrapStyle() {
const cfg = this.mergedFormConfig || {}; const cfg = this.mergedFormConfig || {};
return { return this.$util.objToStyle({
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'
}; });
}, },
// 提交按钮样式:颜色 / 背景色 / 宽度(百分比)/ 上下内边距(控制高度)/ 圆角 / 字号 // 提交按钮样式:颜色 / 背景色 / 宽度(百分比)/ 上下内边距(控制高度)/ 圆角 / 字号
// 与后端 design.css .form-preview-submit button 对齐: // 与后端 design.css .form-preview-submit button 对齐:
@@ -104,14 +104,14 @@ export default {
const submitPaddingY = submitPaddingMap[cfg.submitSize] != null const submitPaddingY = submitPaddingMap[cfg.submitSize] != null
? submitPaddingMap[cfg.submitSize] ? submitPaddingMap[cfg.submitSize]
: submitPaddingMap.medium; : submitPaddingMap.medium;
return { return this.$util.objToStyle({
width: widthPct + '%', width: widthPct + '%',
padding: `${submitPaddingY}rpx 0`, padding: `${submitPaddingY}rpx 0`,
color: cfg.submitColor || '#ffffff', color: cfg.submitColor || '#ffffff',
'background-color': cfg.submitBgColor || '#ff4544', 'background-color': cfg.submitBgColor || '#ff4544',
'border-radius': `${this._num(cfg.inputRadius, 10)}rpx`, 'border-radius': `${this._num(cfg.inputRadius, 10)}rpx`,
'font-size': `${this._num(cfg.labelFontSize, 28)}rpx` 'font-size': `${this._num(cfg.labelFontSize, 28)}rpx`
}; });
}, },
// 提交按钮文字:与后端 design.html <button>提交</button> 默认对齐,开放给 formConfig 覆盖 // 提交按钮文字:与后端 design.html <button>提交</button> 默认对齐,开放给 formConfig 覆盖
submitText() { submitText() {