[new feature] Rate: add icon、void-icon prop (#961)

example/pages/rate/index.js

@@ -3,8 +3,9 @@ import Page from '../../common/page';
 Page({
   data: {
     value1: 3,
-    value2: 4,
-    value3: 2
+    value2: 3,
+    value3: 4,
+    value4: 2
   },
 
   onChange(event) {

example/pages/rate/index.wxml

@@ -6,11 +6,21 @@
   />
 </demo-block>
 
-<demo-block title="自定义颜色">
+<demo-block title="自定义图标">
   <van-rate
     custom-class="van-rate"
+    icon="like"
+    void-icon="like-o"
     data-key="value2"
     value="{{ value2 }}"
+  />
+</demo-block>
+
+<demo-block title="自定义样式">
+  <van-rate
+    custom-class="van-rate"
+    data-key="value3"
+    value="{{ value3 }}"
     size="{{ 25 }}"
     count="{{ 6 }}"
     color="#2ba"
@@ -22,8 +32,8 @@
 <demo-block title="禁用状态">
   <van-rate
     custom-class="van-rate"
-    data-key="value3"
-    value="{{ value3 }}"
+    data-key="value4"
+    value="{{ value4 }}"
     disabled
   />
 </demo-block>

packages/rate/README.md

@@ -30,23 +30,38 @@ Page({
 });
 ```
 
-#### 自定义颜色
+#### 自定义图标
+
+ ```html
+<van-rate
+  value="{{ value }}"
+  icon="like"
+  void-icon="like-o"
+  bind:change="onChange"
+/>
+```
+
+#### 自定义样式
 
 ```html
 <van-rate
   value="{{ value }}"
-  bind:change="onChange"
   size="{{ 25 }}"
   count="{{ 6 }}"
   color="#2ba"
   void-color="#ceefe8"
+  bind:change="onChange"
 />
 ```
 
 #### 禁用状态
 
 ```html
- <van-rate value="{{ value }}" bind:change="onChange" disabled />
+<van-rate
+  disabled
+  value="{{ value }}"
+  bind:change="onChange"
+/>
 ```
 
 ### API
@@ -57,8 +72,10 @@ Page({
 | value | 当前分值 | `Number` | - |
 | count | 图标总数 | `Number` | `5` |
 | size | 图标大小 (px) | `Number` | `20` |
-| color | 选中时的颜色 | `String` | `#ffd21e`  |
+| color | 选中时的颜色 | `String` | `#ffd21e` |
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
+| icon | 选中时的图标，可选值见 Icon 组件 | `String` | `star` |
+| void-icon | 未选中时的图标，可选值见 Icon 组件 | `String` | `star-o` |
 | readonly | 是否为只读状态 | `Boolean` | `false` |
 | disabled | 是否禁用评分 | `Boolean` | `false` |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` |

packages/rate/index.ts

@@ -10,6 +10,14 @@ VantComponent({
       type: Number,
       value: 20
     },
+    icon: {
+      type: String,
+      value: 'star'
+    },
+    voidIcon: {
+      type: String,
+      value: 'star-o'
+    },
     color: {
       type: String,
       value: '#ffd21e'

packages/rate/index.wxml

@@ -8,7 +8,7 @@
     class="van-rate__item"
     size="{{ size }}px"
     data-index="{{ index }}"
-    name="{{ item ? 'star' : 'star-o' }}"
+    name="{{ item ? icon : voidIcon }}"
     color="{{ disabled ? disabledColor : item ? color : voidColor }}"
     bind:click="onSelect"
   />