feat(Rate): add gutter prop (#1960)

example/pages/rate/index.wxml

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

packages/common/utils.ts

@@ -29,3 +29,12 @@ export function getSystemInfoSync() {
 
   return systemInfo;
 }
+
+export function addUnit(value?: string | number): string | undefined {
+  if (!isDef(value)) {
+    return undefined;
+  }
+
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}

packages/rate/README.md

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

packages/rate/index.ts

@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
+import { addUnit } from '../common/utils';
 
 VantComponent({
   field: true,
@@ -38,11 +39,16 @@ VantComponent({
     count: {
       type: Number,
       value: 5
-    }
+    },
+    gutter: {
+      type: null,
+      observer: 'setGutterWithUnit'
+    },
   },
 
   data: {
-    innerValue: 0
+    innerValue: 0,
+    gutterWithUnit: undefined
   },
 
   watch: {
@@ -54,6 +60,12 @@ VantComponent({
   },
 
   methods: {
+    setGutterWithUnit(val) {
+      this.set({
+        gutterWithUnit: addUnit(val)
+      });
+    },
+
     onSelect(event: Weapp.Event) {
       const { data } = this;
       const { score } = event.currentTarget.dataset;

packages/rate/index.wxml

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