feat(radio): add new prop direction (#4007)

fix #3780

example/pages/radio/index.wxml

@@ -9,6 +9,18 @@
   </van-radio-group>
 </demo-block>
 
+<demo-block title="水平排列" padding>
+  <van-radio-group
+    value="{{ radio1 }}"
+    data-key="radio1"
+    bind:change="onChange"
+    direction="horizontal"
+  >
+    <van-radio name="1">单选框 1</van-radio>
+    <van-radio name="2">单选框 2</van-radio>
+  </van-radio-group>
+</demo-block>
+
 <demo-block title="禁用状态" padding>
   <van-radio-group
     disabled
@@ -27,7 +39,9 @@
     data-key="radioShape"
     bind:change="onChange"
   >
-    <van-radio name="1" shape="square" custom-class="demo-radio">单选框</van-radio>
+    <van-radio name="1" shape="square" custom-class="demo-radio"
+      >单选框</van-radio
+    >
     <van-radio name="2" shape="square">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -38,7 +52,9 @@
     data-key="radio3"
     bind:change="onChange"
   >
-    <van-radio name="1" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
+    <van-radio name="1" custom-class="demo-radio" checked-color="#07c160"
+      >单选框</van-radio
+    >
     <van-radio name="2" checked-color="#07c160">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -49,7 +65,9 @@
     data-key="radioSize"
     bind:change="onChange"
   >
-    <van-radio name="1" icon-size="24px" custom-class="demo-radio">单选框</van-radio>
+    <van-radio name="1" icon-size="24px" custom-class="demo-radio"
+      >单选框</van-radio
+    >
     <van-radio name="2" icon-size="24px">单选框</van-radio>
   </van-radio-group>
 </demo-block>
@@ -67,7 +85,7 @@
         src="{{ radio4 === '1' ? icon.active : icon.normal }}"
         class="icon"
         mode="widthFix"
-      />
+      ></image>
     </van-radio>
     <van-radio use-icon-slot name="2">
       自定义图标
@@ -76,7 +94,7 @@
         src="{{ radio4 === '2' ? icon.active : icon.normal }}"
         class="icon"
         mode="widthFix"
-      />
+      ></image>
     </van-radio>
   </van-radio-group>
 </demo-block>
@@ -87,7 +105,9 @@
     data-key="radioLabel"
     bind:change="onChange"
   >
-    <van-radio label-disabled name="1" custom-class="demo-radio">单选框 1</van-radio>
+    <van-radio label-disabled name="1" custom-class="demo-radio"
+      >单选框 1</van-radio
+    >
     <van-radio label-disabled name="2">单选框 2</van-radio>
   </van-radio-group>
 </demo-block>
@@ -95,21 +115,11 @@
 <demo-block title="与 Cell 组件一起使用">
   <van-radio-group value="{{ radio5 }}">
     <van-cell-group>
-      <van-cell
+      <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
-        title="单选框 1"
+        <van-radio slot="right-icon" name="1"></van-radio>
-        clickable
-        data-name="1"
-        bind:click="onClick"
-      >
-        <van-radio slot="right-icon" name="1" />
       </van-cell>
-      <van-cell
+      <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
-        title="单选框 2"
+        <van-radio slot="right-icon" name="2"></van-radio>
-        clickable
-        data-name="2"
-        bind:click="onClick"
-      >
-        <van-radio slot="right-icon" name="2" />
       </van-cell>
     </van-cell-group>
   </van-radio-group>

packages/radio-group/index.less

@@ -1 +1,6 @@
-// empty
+.van-radio-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

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(
-        this.children || []
+        (child: WechatMiniprogram.Component.TrivialInstance) =>
-      ).forEach((child: WechatMiniprogram.Component.TrivialInstance) =>
+          this.updateChild(child)
-        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,
       });
     },

packages/radio-group/index.wxml

@@ -1 +1,5 @@
-<slot />
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('radio-group', [direction]) }}">
+  <slot></slot>
+</view>

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
+<van-radio-group
+  value="{{ radio }}"
+  bind:change="onChange"
+  direction="horizontal"
+>
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 禁用状态
 
 通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
@@ -168,24 +184,25 @@ Page({
 
 ### RadioGroup Props
 
-| 参数     | 说明                   | 类型      | 默认值  | 版本 |
+| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ---------------------- | --------- | ------- | ---- |
+| --- | --- | --- | --- |
-| name     | 在表单内提交时的标识符 | _string_  | -       | -    |
+| name | 在表单内提交时的标识符 | _string_ | - |
-| value    | 当前选中项的标识符     | _any_     | -       | -    |
+| value | 当前选中项的标识符 | _any_ | - |
-| disabled | 是否禁用所有单选框     | _boolean_ | `false` | -    |
+| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
+| direction `v1.6.7` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
 
 ### Radio Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数           | 说明                      | 类型               | 默认值    |
-| --- | --- | --- | --- | --- |
+| -------------- | ------------------------- | ------------------ | --------- |
-| name | 标识符 | _string_ | - | - |
+| name           | 标识符                    | _string_           | -         |
-| shape | 形状，可选值为 `square` | _string_ | `round` | - |
+| shape          | 形状，可选值为 `square`   | _string_           | `round`   |
-| disabled | 是否为禁用状态 | _boolean_ | `false` | - |
+| disabled       | 是否为禁用状态            | _boolean_          | `false`   |
-| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` | - |
+| label-disabled | 是否禁用文本内容点击      | _boolean_          | `false`   |
-| label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
+| label-position | 文本位置，可选值为 `left` | _string_           | `right`   |
-| icon-size | 图标大小，默认单位为`px` | _string \| number_ | `20px` | - |
+| icon-size      | 图标大小，默认单位为`px`  | _string \| number_ | `20px`    |
-| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
+| checked-color  | 选中状态颜色              | _string_           | `#1989fa` |
-| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` | - |
+| use-icon-slot  | 是否使用 icon 插槽        | _boolean_          | `false`   |
 
 ### Radio Event
 

packages/radio/index.less

@@ -11,6 +11,10 @@
     flex: none;
   }
 
+  &--horizontal {
+    .theme(margin-right, '@padding-sm');
+  }
+
   &__icon {
     display: flex;
     align-items: center;

packages/radio/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="van-radio custom-class">
+<view class="{{ utils.bem('radio', [direction]) }} custom-class">
   <view
     wx:if="{{ labelPosition === 'left' }}"
     class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}"