feat(Rate): size prop support string (#1970)

example/pages/rate/index.wxml

@@ -3,7 +3,6 @@
     custom-class="van-rate"
     data-key="value1"
     value="{{ value1 }}"
-    gutter="20px"
   />
 </demo-block>
 

packages/rate/README.md

@@ -104,7 +104,7 @@ Page({
 | name | 在表单内提交时的标识符 | *string* | - |
 | value | 当前分值 | *number* | - |
 | count | 图标总数 | *number* | `5` |
-| size | 图标大小 `px` | *number* | `20` |
+| size | 图标大小，默认单位为 `px` | *string \| number* | `20px` |
 | gutter | 图标间距，默认单位为 `px` | *string \| number* | `4px` |
 | color | 选中时的颜色 | *string* | `#ffd21e` |
 | void-color | 未选中时的颜色 | *string* | `#c7c7c7` |

packages/rate/index.ts

@@ -13,8 +13,8 @@ VantComponent({
     disabled: Boolean,
     allowHalf: Boolean,
     size: {
-      type: Number,
-      value: 20
+      type: null,
+      observer: 'setSizeWithUnit'
     },
     icon: {
       type: String,
@@ -48,7 +48,8 @@ VantComponent({
 
   data: {
     innerValue: 0,
-    gutterWithUnit: undefined
+    gutterWithUnit: undefined,
+    sizeWithUnit: '20px'
   },
 
   watch: {
@@ -60,6 +61,12 @@ VantComponent({
   },
 
   methods: {
+    setSizeWithUnit(val) {
+      this.set({
+        sizeWithUnit: addUnit(val)
+      });
+    },
+
     setGutterWithUnit(val) {
       this.set({
         gutterWithUnit: addUnit(val)

packages/rate/index.wxml

@@ -8,7 +8,7 @@
     class="van-rate__item"
     wx:for="{{ count }}"
     wx:key="index"
-    style="font-size: {{ size }}px;padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
+    style="font-size: {{ sizeWithUnit }};padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
   >
     <van-icon
       name="{{ index + 1 <= innerValue ? icon : voidIcon }}"