refactor(ns-newform): 统一使用工具函数转换样式对象
1. 将所有样式计算方法改为通过$util.objToStyle生成样式字符串 2. 优化行分割线的样式定义方式,拆分border-bottom属性 3. 移除最后一个子元素的分割线样式逻辑,改为通过CSS变量控制
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user