Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(ns-form,ns-newform): add option layout configuration for radio/checkbox groups

Browse Source 
add vertical and wrap layout options for form option groups, support passing option_layout field in form items to control arrangement style, default is wrap auto wrap layout
This commit is contained in:
ZF Sun
2026-07-31 11:39:24 +08:00
parent de6a76e91b
commit a891e4abf9
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/ns-form/ns-form.vue
View File

@@ -70,7 +70,7 @@
<text class="tit">{{ item.value.title }}</text> <text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text> <text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view> </view>
<view class="box check-group-box"> <view :class="['box', 'check-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
<checkbox-group @change="checkboxChange($event, index)"> <checkbox-group @change="checkboxChange($event, index)">
<label v-for="(v, k) in item.option_lists" :key="k"> <label v-for="(v, k) in item.option_lists" :key="k">
<checkbox :value="v.value" :checked="v.checked" /> <checkbox :value="v.value" :checked="v.checked" />
@@ -90,7 +90,7 @@
<text class="tit">{{ item.value.title }}</text> <text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text> <text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view> </view>
<view class="box radio-group-box"> <view :class="['box', 'radio-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
<radio-group @change="radioChange($event, index)"> <radio-group @change="radioChange($event, index)">
<label v-for="(v, k) in item.option_lists" :key="k"> <label v-for="(v, k) in item.option_lists" :key="k">
<radio :value="v.value" :checked="item.val == v.value" /> <radio :value="v.value" :checked="item.val == v.value" />
@@ -1088,6 +1088,15 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
// 选项排列样式：vertical = 每个选项独立一行；wrap（默认）= 横向自动换行
.option-layout-vertical {
checkbox-group,
radio-group {
flex-direction: column;
align-items: flex-start;
}
}
label { label {
display: flex; display: flex;
align-items: center; align-items: center;

14
components/ns-newform/ns-newform.vue
View File

@@ -64,7 +64,7 @@
<text class="tit">{{ item.value.title }}</text> <text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text> <text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view> </view>
<view :class="['box', 'check-group-box', 'align-left']"> <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)">
<label v-for="(v, k) in item.option_lists" :key="k"> <label v-for="(v, k) in item.option_lists" :key="k">
<checkbox :value="v.value" :checked="v.checked"></checkbox> <checkbox :value="v.value" :checked="v.checked"></checkbox>
@@ -92,7 +92,7 @@
<text class="tit">{{ item.value.title }}</text> <text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text> <text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view> </view>
<view :class="['box', 'radio-group-box', 'align-left']"> <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)">
<label v-for="(v, k) in item.option_lists" :key="k"> <label v-for="(v, k) in item.option_lists" :key="k">
<radio :value="v.value" :checked="item.val == v.value"></radio> <radio :value="v.value" :checked="item.val == v.value"></radio>
@@ -1322,6 +1322,16 @@ export default {
} }
} }
// 选项排列样式：vertical = 每个选项独立一行；wrap（默认）= 横向自动换行
.option-layout-vertical {
checkbox-group,
radio-group {
flex-direction: column;
align-items: flex-start;
gap: 16rpx;
}
}
label { label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;