refactor(diy-form): use objToStyle to format style objects
统一使用 $util.objToStyle 方法处理样式对象,简化样式代码编写,保持代码风格一致
This commit is contained in:
@@ -69,27 +69,27 @@ export default {
|
||||
},
|
||||
// Banner 容器左右内边距(与后端 .form-preview-banner padding-x 对齐)
|
||||
bannerStyle() {
|
||||
return {
|
||||
return this.$util.objToStyle({
|
||||
padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx`
|
||||
};
|
||||
});
|
||||
},
|
||||
// 提示语样式:padding-x、font-size、color、bg-color(与后端 .form-preview-tip 对齐)
|
||||
tipStyle() {
|
||||
const cfg = this.mergedFormConfig || {};
|
||||
return {
|
||||
return this.$util.objToStyle({
|
||||
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.tipPaddingX, 14)}rpx`,
|
||||
'font-size': `${this._num(cfg.tipFontSize, 24)}rpx`,
|
||||
'color': cfg.tipColor || '#666666',
|
||||
'background-color': cfg.tipBgColor || 'transparent'
|
||||
};
|
||||
});
|
||||
},
|
||||
// 提交按钮外层:与后端 .form-preview-submit 对齐(padding: row-padding-y form-padding-x;background: form-bg-color)
|
||||
submitWrapStyle() {
|
||||
const cfg = this.mergedFormConfig || {};
|
||||
return {
|
||||
return this.$util.objToStyle({
|
||||
padding: `${this._num(cfg.rowPaddingY, 4)}rpx ${this._num(cfg.formPaddingX, 14)}rpx`,
|
||||
'background-color': cfg.formBgColor || '#ffffff'
|
||||
};
|
||||
});
|
||||
},
|
||||
// 提交按钮样式:颜色 / 背景色 / 宽度(百分比)/ 上下内边距(控制高度)/ 圆角 / 字号
|
||||
// 与后端 design.css .form-preview-submit button 对齐:
|
||||
@@ -104,14 +104,14 @@ export default {
|
||||
const submitPaddingY = submitPaddingMap[cfg.submitSize] != null
|
||||
? submitPaddingMap[cfg.submitSize]
|
||||
: submitPaddingMap.medium;
|
||||
return {
|
||||
return this.$util.objToStyle({
|
||||
width: widthPct + '%',
|
||||
padding: `${submitPaddingY}rpx 0`,
|
||||
color: cfg.submitColor || '#ffffff',
|
||||
'background-color': cfg.submitBgColor || '#ff4544',
|
||||
'border-radius': `${this._num(cfg.inputRadius, 10)}rpx`,
|
||||
'font-size': `${this._num(cfg.labelFontSize, 28)}rpx`
|
||||
};
|
||||
});
|
||||
},
|
||||
// 提交按钮文字:与后端 design.html <button>提交</button> 默认对齐,开放给 formConfig 覆盖
|
||||
submitText() {
|
||||
|
||||
Reference in New Issue
Block a user