feat(Rate): css variables (#4297)

* feat(Rate): css variables

* fix(Rate): adjust less variables name

* fix(Rate): adjust less variables name

* docs(Rate): adjust doc

- 示例与文档对应
- 对照vant文档做了一些调整
- 增加 `监听 change 事件`
- 删除 `props` 中的版本列

* fix(Rate): adjust demo

example/pages/rate/index.js

@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
 
 Page({
   data: {
@@ -8,5 +9,10 @@ Page({
     value4: 2.5,
     value5: 4,
     value6: 3,
+    value8: 2,
+  },
+
+  onChange(event) {
+    Toast('当前值：' + event.detail);
   },
 });

example/pages/rate/index.wxml

@@ -19,9 +19,9 @@
     custom-class="rate-position"
     model:value="{{ value3 }}"
     size="{{ 25 }}"
-    color="#ee0a24"
+    color="#ffd21e"
-    void-color="#eee"
     void-icon="star"
+    void-color="#eee"
   />
 </demo-block>
 
@@ -29,11 +29,9 @@
   <van-rate
     custom-class="rate-position"
     model:value="{{ value4 }}"
-    size="{{ 25 }}"
     allow-half
-    color="#ee0a24"
-    void-color="#eee"
     void-icon="star"
+    void-color="#eee"
   />
 </demo-block>
 
@@ -60,3 +58,13 @@
     readonly
   />
 </demo-block>
+
+<demo-block title="监听 change 事件">
+  <van-rate
+    custom-class="rate-position"
+    value="{{ value8 }}"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<van-toast id="van-toast" />

packages/common/style/var.less

@@ -387,6 +387,10 @@
 // Rate
 @rate-horizontal-padding: 2px;
 @rate-icon-size: 20px;
+@rate-icon-void-color: @gray-5;
+@rate-icon-full-color: @red;
+@rate-icon-disabled-color: @gray-5;
+@rate-icon-gutter: @padding-base;
 
 // Switch
 @switch-width: 2em;

packages/rate/README.md

@@ -53,9 +53,9 @@ Page({
 <van-rate
   value="{{ value }}"
   size="{{ 25 }}"
-  color="#ee0a24"
+  color="#ffd21e"
-  void-color="#eee"
   void-icon="star"
+  void-color="#eee"
   bind:change="onChange"
 />
 ```
@@ -65,15 +65,27 @@ Page({
 ```html
 <van-rate
   value="{{ value }}"
-  size="{{ 25 }}"
   allow-half
-  color="#ee0a24"
-  void-color="#eee"
   void-icon="star"
+  void-color="#eee"
   bind:change="onChange"
 />
 ```
 
+```javascript
+Page({
+  data: {
+    value: 2.5,
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail,
+    });
+  },
+});
+```
+
 ### 自定义数量
 
 ```html
@@ -92,26 +104,46 @@ Page({
 <van-rate readonly value="{{ value }}" bind:change="onChange" />
 ```
 
+### 监听 change 事件
+
+评分变化时，会触发 `change` 事件。
+
+```html
+<van-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 2,
+  },
+
+  onChange(event) {
+    Toast('当前值：' + event.detail);
+  },
+});
+```
+
 ## API
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数           | 说明                                                        | 类型               | 默认值    |
-| --- | --- | --- | --- | --- |
+| -------------- | ----------------------------------------------------------- | ------------------ | --------- |
-| name | 在表单内提交时的标识符 | _string_ | - | - |
+| name           | 在表单内提交时的标识符                                      | _string_           | -         |
-| value | 当前分值 | _number_ | - | - |
+| value          | 当前分值                                                    | _number_           | -         |
-| count | 图标总数 | _number_ | `5` | - |
+| count          | 图标总数                                                    | _number_           | `5`       |
-| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` | - |
+| size           | 图标大小，默认单位为 `px`                                   | _string \| number_ | `20px`    |
-| gutter | 图标间距，默认单位为 `px` | _string \| number_ | `4px` |
+| gutter         | 图标间距，默认单位为 `px`                                   | _string \| number_ | `4px`     |
-| color | 选中时的颜色 | _string_ | `#ffd21e` | - |
+| color          | 选中时的颜色                                                | _string_           | `#ffd21e` |
-| void-color | 未选中时的颜色 | _string_ | `#c7c7c7` | - |
+| void-color     | 未选中时的颜色                                              | _string_           | `#c7c7c7` |
-| icon | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star` | - |
+| icon           | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon)    | _string_           | `star`    |
-| void-icon | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star-o` | - |
+| void-icon      | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon)  | _string_           | `star-o`  |
-| allow-half | 是否允许半选 | _boolean_ | `false` | - |
+| allow-half     | 是否允许半选                                                | _boolean_          | `false`   |
-| readonly | 是否为只读状态  | _boolean_ | `false` | - |
+| readonly       | 是否为只读状态                                            | _boolean_          | `false`   |
-| disabled | 是否禁用评分 | _boolean_ | `false` | - |
+| disabled       | 是否禁用评分                                                | _boolean_          | `false`   |
-| disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` | - |
+| disabled-color | 禁用时的颜色                                                | _string_           | `#bdbdbd` |
-| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` | - |
+| touchable      | 是否可以通过滑动手势选择评分                                | _boolean_          | `true`    |
 
 ### Events
 

packages/rate/index.less

@@ -8,11 +8,16 @@
   &__item {
     position: relative;
     .theme(padding, '0 @rate-horizontal-padding');
+
+    &:not(:last-child) {
+      .theme(padding-right, '@rate-icon-gutter');
+    }
   }
 
   &__icon {
     display: block;
     height: 1em;
+    .theme(color, '@rate-icon-void-color');
     .theme(font-size, '@rate-icon-size');
 
     &--half {
@@ -21,6 +26,15 @@
       width: 0.5em;
       overflow: hidden;
       .theme(left, '@rate-horizontal-padding');
+      .theme(color, '@rate-icon-full-color');
+    }
+
+    &--full {
+      .theme(color, '@rate-icon-full-color');
+    }
+
+    &--disabled {
+      .theme(color, '@rate-icon-disabled-color');
     }
   }
 }

packages/rate/index.ts

@@ -28,18 +28,9 @@ VantComponent({
       type: String,
       value: 'star-o',
     },
-    color: {
+    color: String,
-      type: String,
+    voidColor: String,
-      value: '#ffd21e',
+    disabledColor: String,
-    },
-    voidColor: {
-      type: String,
-      value: '#c7c7c7',
-    },
-    disabledColor: {
-      type: String,
-      value: '#bdbdbd',
-    },
     count: {
       type: Number,
       value: 5,

packages/rate/index.wxml

@@ -1,19 +1,20 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="../wxs/style.wxs" module="style" />
 
 <view
-  class="van-rate custom-class"
+  class="{{ utils.bem('rate') }} custom-class"
   bind:touchmove="onTouchMove"
 >
   <view
-    class="van-rate__item"
+    class="{{ utils.bem('rate__item') }}"
     wx:for="{{ innerCountArray }}"
     wx:key="index"
-    style="padding-right: {{ index !== count - 1 ? utils.addUnit(gutter) : '' }}"
+    style="{{ style({ paddingRight: index !== count - 1 ? utils.addUnit(gutter) : null }) }}"
   >
     <van-icon
       name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
-      class="van-rate__icon"
+      class="{{ utils.bem('rate__icon', [{ disabled, full: index + 1 <= innerValue }])}}"
-      style="font-size: {{ utils.addUnit(size) }}"
+      style="{{ style({ fontSize: utils.addUnit(size) }) }}"
       custom-class="icon-class"
       data-score="{{ index }}"
       color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
@@ -23,8 +24,8 @@
     <van-icon
       wx:if="{{ allowHalf }}"
       name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
-      class="{{ utils.bem('rate__icon', ['half']) }}"
+      class="{{ utils.bem('rate__icon', ['half', { disabled, full: index + 0.5 <= innerValue }]) }}"
-      style="font-size: {{ utils.addUnit(size) }}"
+      style="{{ style({ fontSize: utils.addUnit(size) }) }}"
       custom-class="icon-class"
       data-score="{{ index - 0.5 }}"
       color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"