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

chore：微信小程序的表单多选可以垂直对齐

Browse Source
This commit is contained in:
jing
2026-08-28 14:13:32 +08:00
parent ecb0789780
commit 7ebbdaf996
2 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1171,23 +1171,11 @@
} }
} }
checkbox-group { checkbox-group,
display: flex;
flex-wrap: wrap;
}
radio-group { radio-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} width: 100%;
// 选项排列样式：vertical = 每个选项独立一行；wrap（默认）= 横向自动换行
.option-layout-vertical {
checkbox-group,
radio-group {
flex-direction: column;
align-items: flex-start;
}
} }
label { label {
@@ -1197,6 +1185,39 @@
margin-right: 30rpx; margin-right: 30rpx;
} }
// 选项排列样式：vertical = 每个选项独立一行；wrap（默认）= 横向自动换行
// 注意：option-layout-* 是 .box 自身的类，必须用 & 嵌套，否则编译成 .box .option-layout-* 会选不中
&.option-layout-vertical {
checkbox-group,
radio-group {
flex-direction: column;
align-items: flex-start;
}
label {
width: 100%;
margin-right: 0;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
}
&.option-layout-wrap {
checkbox-group,
radio-group {
flex-direction: row;
align-items: center;
}
label {
margin-right: 30rpx;
margin-bottom: 0;
}
}
&.img-boxs { &.img-boxs {
display: flex; display: flex;
align-items: center; align-items: center;

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

@@ -1389,7 +1389,8 @@ export default {
} }
// 选项排列样式：vertical = 每个选项独立一行；wrap = 横向自动换行 // 选项排列样式：vertical = 每个选项独立一行；wrap = 横向自动换行
.option-layout-vertical { // option-layout-* 是 .box 自身的类，必须用 & 嵌套，否则编译成 .box .option-layout-* 选不中实际 DOM
&.option-layout-vertical {
checkbox-group, checkbox-group,
radio-group { radio-group {
flex-direction: column; flex-direction: column;