diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue index d950bad..d2dd806 100644 --- a/components-diy/diy-form.vue +++ b/components-diy/diy-form.vue @@ -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 默认对齐,开放给 formConfig 覆盖 submitText() {