feat(Radio): add icon-size prop (#2027)

packages/progress/index.ts

@@ -26,10 +26,8 @@ VantComponent({
     }
   },
 
-  data() {
-    return {
-      strokeWidthUnit: '4px'
-    };
+  data: {
+    strokeWidthUnit: '4px'
   },
 
   methods: {

packages/radio/README.md

@@ -153,6 +153,7 @@ Page({
 | value | 当前选中项的 name | *any* | - | - |
 | shape | 形状，可选值为 `round` `square` | *string* | `round` | - |
 | disabled | 是否为禁用状态 | *boolean* | `false` | - |
+| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | label-disabled | 是否禁用文本内容点击 | *boolean* | `false` | - |
 | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
 | use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - |

packages/radio/index.less

@@ -2,14 +2,10 @@
 
 .van-radio {
   display: flex;
+  align-items: center;
   overflow: hidden;
   user-select: none;
 
-  &__icon-wrap,
-  &__label {
-    line-height: @radio-size;
-  }
-
   &__icon-wrap {
     flex: none;
   }
@@ -17,10 +13,9 @@
   &__icon {
     display: block;
     box-sizing: border-box;
-    width: @radio-size;
-    height: @radio-size;
+    width: 1em;
+    height: 1em;
     color: transparent;
-    font-size: 14px;
     text-align: center;
     border: 1px solid @radio-border-color;
     transition-duration: @radio-transition-duration;

packages/radio/index.ts

@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
+import { addUnit } from '../common/utils';
 
 VantComponent({
   field: true,
@@ -30,10 +31,24 @@ VantComponent({
     shape: {
       type: String,
       value: 'round'
+    },
+    iconSize: {
+      type: null,
+      observer: 'setIconSizeUnit'
     }
   },
 
+  data: {
+    iconSizeWithUnit: '20px'
+  },
+
   methods: {
+    setIconSizeUnit(val) {
+      this.setData({
+        iconSizeWithUnit: addUnit(val)
+      });
+    },
+
     emitChange(value: boolean) {
       const instance = this.parent || this;
       instance.$emit('input', value);

packages/radio/index.wxml

@@ -8,15 +8,15 @@
   >
     <slot />
   </view>
-  <view class="van-radio__icon-wrap" bindtap="onChange">
+  <view class="van-radio__icon-wrap" style="font-size: {{ iconSizeWithUnit }};" bindtap="onChange">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <van-icon
       wx:else
       name="success"
       class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
-      style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
       custom-class="icon-class"
-      custom-style="line-height: 20px;"
+      custom-style="line-height: {{ iconSizeWithUnit }};font-size: .8em;display: block;"
     />
   </view>
   <view