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 对齐)
|
// 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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user