diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
index d73c2833..225e5087 100644
--- a/example/pages/radio/index.wxml
+++ b/example/pages/radio/index.wxml
@@ -9,6 +9,18 @@
+
+
+ 单选框 1
+ 单选框 2
+
+
+
- 单选框
+ 单选框
单选框
@@ -38,7 +52,9 @@
data-key="radio3"
bind:change="onChange"
>
- 单选框
+ 单选框
单选框
@@ -49,7 +65,9 @@
data-key="radioSize"
bind:change="onChange"
>
- 单选框
+ 单选框
单选框
@@ -67,7 +85,7 @@
src="{{ radio4 === '1' ? icon.active : icon.normal }}"
class="icon"
mode="widthFix"
- />
+ >
自定义图标
@@ -76,7 +94,7 @@
src="{{ radio4 === '2' ? icon.active : icon.normal }}"
class="icon"
mode="widthFix"
- />
+ >
@@ -87,7 +105,9 @@
data-key="radioLabel"
bind:change="onChange"
>
- 单选框 1
+ 单选框 1
单选框 2
@@ -95,21 +115,11 @@
-
-
+
+
-
-
+
+
diff --git a/packages/radio-group/index.less b/packages/radio-group/index.less
index 8b1a3937..fe02eb7e 100644
--- a/packages/radio-group/index.less
+++ b/packages/radio-group/index.less
@@ -1 +1,6 @@
-// empty
+.van-radio-group {
+ &--horizontal {
+ display: flex;
+ flex-wrap: wrap;
+ }
+}
diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts
index 9fa1aa38..6c290069 100644
--- a/packages/radio-group/index.ts
+++ b/packages/radio-group/index.ts
@@ -13,6 +13,7 @@ VantComponent({
type: null,
observer: 'updateChildren',
},
+ direction: String,
disabled: {
type: Boolean,
observer: 'updateChildren',
@@ -21,17 +22,17 @@ VantComponent({
methods: {
updateChildren() {
- (
- this.children || []
- ).forEach((child: WechatMiniprogram.Component.TrivialInstance) =>
- this.updateChild(child)
+ this.children.forEach(
+ (child: WechatMiniprogram.Component.TrivialInstance) =>
+ this.updateChild(child)
);
},
updateChild(child: WechatMiniprogram.Component.TrivialInstance) {
- const { value, disabled } = this.data;
+ const { value, disabled, direction } = this.data;
child.setData({
value,
+ direction,
disabled: disabled || child.data.disabled,
});
},
diff --git a/packages/radio-group/index.wxml b/packages/radio-group/index.wxml
index 4fa864ce..0ab17afc 100644
--- a/packages/radio-group/index.wxml
+++ b/packages/radio-group/index.wxml
@@ -1 +1,5 @@
-
+
+
+
+
+
diff --git a/packages/radio/README.md b/packages/radio/README.md
index 592cb954..70ea5017 100644
--- a/packages/radio/README.md
+++ b/packages/radio/README.md
@@ -29,6 +29,7 @@ Page({
data: {
radio: '1',
},
+
onChange(event) {
this.setData({
radio: event.detail,
@@ -37,6 +38,21 @@ Page({
});
```
+### 水平排列
+
+将`direction`属性设置为`horizontal`后,单选框组会变成水平排列。
+
+```html
+
+ 单选框 1
+ 单选框 2
+
+```
+
### 禁用状态
通过`disabled`属性禁止选项切换,在`Radio`上设置`diabled`可以禁用单个选项
@@ -168,24 +184,25 @@ Page({
### RadioGroup Props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | ---------------------- | --------- | ------- | ---- |
-| name | 在表单内提交时的标识符 | _string_ | - | - |
-| value | 当前选中项的标识符 | _any_ | - | - |
-| disabled | 是否禁用所有单选框 | _boolean_ | `false` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| value | 当前选中项的标识符 | _any_ | - |
+| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
+| direction `v1.6.7` | 排列方向,可选值为 `horizontal` | _string_ | `vertical` |
### Radio Props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| name | 标识符 | _string_ | - | - |
-| shape | 形状,可选值为 `square` | _string_ | `round` | - |
-| disabled | 是否为禁用状态 | _boolean_ | `false` | - |
-| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` | - |
-| label-position | 文本位置,可选值为 `left` | _string_ | `right` | - |
-| icon-size | 图标大小,默认单位为`px` | _string \| number_ | `20px` | - |
-| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
-| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| -------------- | ------------------------- | ------------------ | --------- |
+| name | 标识符 | _string_ | - |
+| shape | 形状,可选值为 `square` | _string_ | `round` |
+| disabled | 是否为禁用状态 | _boolean_ | `false` |
+| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
+| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
+| icon-size | 图标大小,默认单位为`px` | _string \| number_ | `20px` |
+| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
+| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` |
### Radio Event
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 21375abb..a0fbcf91 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -11,6 +11,10 @@
flex: none;
}
+ &--horizontal {
+ .theme(margin-right, '@padding-sm');
+ }
+
&__icon {
display: flex;
align-items: center;
diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml
index 0b748eff..4601c068 100644
--- a/packages/radio/index.wxml
+++ b/packages/radio/index.wxml
@@ -1,6 +1,6 @@
-
+