fix(forms): 修复单选多选组布局样式兼容问题
1. 为ns-newform和ns-form的单选/多选组添加内联样式属性`_optionLayoutStyle` 2. 预计算垂直/流式布局的flex样式,解决跨端渲染兼容问题 3. 调整本地配置文件的启用项注释
This commit is contained in:
@@ -65,7 +65,7 @@
|
||||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view :class="['box', 'check-group-box', 'align-left', 'option-layout-' + (item.value.option_layout || 'wrap')]">
|
||||
<checkbox-group @change="checkboxChange($event, index)">
|
||||
<checkbox-group @change="checkboxChange($event, index)" :style="item._optionLayoutStyle">
|
||||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||||
<checkbox :value="v.value" :checked="v.checked"></checkbox>
|
||||
<view class="checkbox">
|
||||
@@ -93,7 +93,7 @@
|
||||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view :class="['box', 'radio-group-box', 'align-left', 'option-layout-' + (item.value.option_layout || 'wrap')]">
|
||||
<radio-group @change="radioChange($event, index)">
|
||||
<radio-group @change="radioChange($event, index)" :style="item._optionLayoutStyle">
|
||||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||||
<radio :value="v.value" :checked="item.val == v.value"></radio>
|
||||
<view class="radio-box">
|
||||
@@ -550,6 +550,23 @@ export default {
|
||||
// item 级别 box 对齐方式(与原 getItemBoxAlignStyle 逻辑一致)
|
||||
const align = itemValue.input_align;
|
||||
this.$set(item, '_boxAlignStyle', align ? { 'text-align': align } : {});
|
||||
|
||||
// 选项排列样式:vertical 时给 checkbox-group / radio-group 加 flex-direction
|
||||
// 走 inline style(不依赖 dev 编译产物的 SCSS 类,跨端兼容更稳)
|
||||
// 直接写 flex-direction 等 CSS 属性,inline style 优先级最高
|
||||
const optLayout = itemValue.option_layout;
|
||||
const optStyle = {};
|
||||
if (optLayout === 'vertical') {
|
||||
optStyle['flex-direction'] = 'column';
|
||||
optStyle['align-items'] = 'flex-start';
|
||||
optStyle['gap'] = '8px';
|
||||
} else {
|
||||
// wrap 模式:用 display: flex 基础属性兜底(不强制,让浏览器按 SCSS 默认渲染)
|
||||
optStyle['flex-direction'] = 'row';
|
||||
optStyle['align-items'] = 'center';
|
||||
optStyle['gap'] = '6px';
|
||||
}
|
||||
this.$set(item, '_optionLayoutStyle', optStyle);
|
||||
});
|
||||
},
|
||||
// 容器样式(提供给外部 diy-form 使用)
|
||||
|
||||
Reference in New Issue
Block a user