refactor(ns-newform): 统一使用工具函数转换样式对象

1. 将所有样式计算方法改为通过$util.objToStyle生成样式字符串
2. 优化行分割线的样式定义方式,拆分border-bottom属性
3. 移除最后一个子元素的分割线样式逻辑,改为通过CSS变量控制
This commit is contained in:
2026-06-11 17:47:06 +08:00
parent bbe3d75267
commit b3dd1af674

View File

@@ -1,5 +1,5 @@
<template>
<view class="form-wrap form-component" :style="formWrapStyle">
<view class="form-wrap form-component" :style="formWrapStyle" >
<view v-for="(item, index) in formData" :key="index">
<!-- 文本输入框 -->
<view v-if="item.controller == 'Text'" class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle">
@@ -466,7 +466,8 @@ export default {
formWrapStyle() {
const cfg = this.config;
const num = (v, fb) => (typeof v === 'number' ? v : parseInt(v) || fb);
return {
return this.$util.objToStyle({
// 仅保留左右内边距 = form-padding-x;上下由每行 row-padding-y 承担
padding: `0 ${cfg.formPaddingX}rpx`,
background: cfg.formBgColor,
@@ -493,13 +494,13 @@ export default {
'--submit-bg-color': cfg.submitBgColor,
// 分割线显隐
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
};
});
},
// 行间距样式:仅上下内边距,水平由外层 form-wrap 控制(与后端 form-gorup 对齐)
rowWrapStyle() {
return {
return this.$util.objToStyle({
padding: `${this.config.rowPaddingY}rpx 0`
};
});
},
// 行容器 class:用于控制分割线显隐
rowWrapClass() {
@@ -507,25 +508,25 @@ export default {
},
// 行最小高度
rowCellStyle() {
return {
return this.$util.objToStyle({
'min-height': `${this.config.rowMinHeight}rpx`
};
});
},
// 标签与输入框间距
nameStyle() {
if (this.mode === 'vertical') {
return {};
return this.$util.objToStyle({});
}
return {
return this.$util.objToStyle({
'margin-right': `${this.config.labelGap}rpx`
};
});
},
// 输入框样式(全局,未指定 item 时使用)
inputStyle() {
return {
return this.$util.objToStyle({
'min-height': `${this.config.inputHeight}rpx`,
'border-radius': `${this.config.inputRadius}rpx`
};
});
},
labelStyle() {
let style = {};
@@ -537,7 +538,7 @@ export default {
}
style.fontSize = fontSize;
style.color = this.config.labelColor;
return style;
return this.$util.objToStyle(style);
},
requiredColor() {
return this.config.requiredColor;
@@ -552,7 +553,7 @@ export default {
} else {
style.background = this.config.rowDividerColor;
}
return style;
return this.$util.objToStyle(style);
}
},
methods: {
@@ -1043,11 +1044,11 @@ export default {
box-sizing: border-box;
// 行分割线:与后端 design.css .form-preview-wrap .form-gorup 对齐
// 用 border-bottom 而非 ::after 伪元素(亚像素不可见 + 多端兼容性差)
border-bottom: 2rpx solid var(--row-divider-color, #f0f0f0);
// border-bottom: 2rpx solid var(--row-divider-color, #f0f0f0);
border-bottom-width: 2rpx;
border-bottom-style: solid;
border-bottom-color: var(--row-divider-color, #f0f0f0);
&:last-child {
border-bottom: 0;
}
// 后端 show_row_divider = 0:隐藏所有行分割线
&.no-divider {