[Improvement] Rate: add english document (#1010)

docs/demos/views/rate.vue

@@ -1,21 +1,21 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-rate v-model="valueA" />
+      <van-rate v-model="value1" />
     </demo-block>
 
     <demo-block :title="$t('customColor')">
       <van-rate
-        v-model="valueB"
+        v-model="value2"
         :size="25"
-        :todal="6"
+        :count="6"
-        :color="'#2ba'"
+        color="#2ba"
-        :default-color="'#ceefe8'"
+        void-color="#ceefe8"
       />
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-rate disabled v-model="valueC" />
+      <van-rate disabled v-model="value3" />
     </demo-block>
   </demo-section>
 </template>
@@ -35,9 +35,9 @@ export default {
 
   data() {
     return {
-      valueA: 3,
+      value1: 3,
-      valueB: 4,
+      value2: 4,
-      valueC: 2
+      value3: 2
     };
   }
 };

docs/markdown/en-US/rate.md

@@ -0,0 +1,56 @@
+## Rate
+
+### Install
+``` javascript
+import { Rate } from 'vant';
+
+Vue.use(Rate);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-rate v-model="value" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 3
+    };
+  }
+}
+```
+
+#### Custom Color
+
+```html
+<van-rate
+  v-model="value"
+  :size="25"
+  :count="6"
+  color="#2ba"
+  void-color="#ceefe8"
+/>
+```
+
+#### Disabled
+
+```html
+ <van-rate v-model="value" disabled />
+```
+
+### Rate API
+
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| v-model | Current rate | `Number` | - |
+| count | Count | `Number` | `5` |
+| size | Icon size (px) | `Number` | `20` |
+| color | Selected color | `String` | `#ffd21e`  |
+| void-color | Void color | `String` | `#c7c7c7` |
+| disabled-color | Disabled color | `String` | `#bdbdbd` | 
+| disabled | Whether to disable rate | `Boolean` | `false` |

docs/markdown/index.js

@@ -112,6 +112,7 @@ export default {
   'en-US/pull-refresh': wrapper(r => require.ensure([], () => r(require('./en-US/pull-refresh.md')), 'en-US/pull-refresh')),
   'en-US/quickstart': wrapper(r => require.ensure([], () => r(require('./en-US/quickstart.md')), 'en-US/quickstart')),
   'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
+  'en-US/rate': wrapper(r => require.ensure([], () => r(require('./en-US/rate.md')), 'en-US/rate')),
   'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
   'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
   'en-US/slider': wrapper(r => require.ensure([], () => r(require('./en-US/slider.md')), 'en-US/slider')),

docs/markdown/zh-CN/rate.md

@@ -31,9 +31,9 @@ export default {
 <van-rate
   v-model="value"
   :size="25"
-  :todal="6"
+  :count="6"
-  :color="color",
+  color="#2ba"
-  :defaultColor="defaultColor"
+  void-color="#ceefe8"
 />
 ```
 
@@ -47,10 +47,10 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| v-model | 当前分数 | `Number` | - |
+| v-model | 当前分值 | `Number` | - |
-| size | 星标大小，单位为`px` | `Number` | `20` |
+| count | 图标总数 | `Number` | `5` |
-| total | 总分 | `Number` | `5` |
+| size | 图标大小 (px) | `Number` | `20` |
-| color | 选中时的星标颜色 | `String` | `#ffd21e`  |
+| color | 选中时的颜色 | `String` | `#ffd21e`  |
-| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` |
+| void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
-| disabled-color | 不可选时的星标颜色 | `String` | `#bdbdbd` | 
+| disabled-color | 不可选时的颜色 | `String` | `#bdbdbd` | 
 | disabled | 是否禁用评分 | `Boolean` | `false` |

docs/src/doc.config.js

@@ -438,6 +438,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress'
               },
+              {
+                path: '/rate',
+                title: 'Rate'
+              },
               {
                 path: '/slider',
                 title: 'Slider'

packages/rate/index.vue

@@ -1,33 +1,16 @@
 <template>
   <div :class="b()">
-    <div
+    <svg
+      v-for="(isFull, index) in list"
+      :fill="disabled ? disabledColor : isFull ? color : voidColor"
+      viewBox="0 0 32 32"
+      :style="style"
       :class="b('item')"
-      v-for="(isFull, index) in starList"
+      @click="onSelect(index)"
-      :key="index"
-      :style="{
-        'width': `${size}px`
-      }"
-      @click="selectRate(index)"
     >
-      <svg
+      <path :d="isFull ? 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z' : 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z'" />
-        v-if="isFull"
-        :fill="disabled ? defaultColor : color"
-        viewBox="0 0 32 32"
-        width="100%"
-        height="100%"
-      >
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"/>
-      </svg>
-      <svg
-        v-else
-        :fill="defaultColor"
-        viewBox="0 0 32 32"
-      >
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"/>
     </svg>
   </div>
-  </div>
-
 </template>
 
 <script>
@@ -49,7 +32,7 @@ export default create({
       type: String,
       default: '#ffd21e'
     },
-    defaultColor: {
+    voidColor: {
       type: String,
       default: '#c7c7c7'
     },
@@ -57,7 +40,7 @@ export default create({
       type: String,
       default: '#bdbdbd'
     },
-    total: {
+    count: {
       type: Number,
       default: 5
     },
@@ -68,13 +51,19 @@ export default create({
   },
 
   computed: {
-    starList() {
+    style() {
-      return new Array(this.total).fill(false).map((value, index) => index < this.value);
+      return {
+        width: this.size + 'px'
+      };
+    },
+
+    list() {
+      return new Array(this.count).fill(false).map((value, index) => index < this.value);
     }
   },
 
   methods: {
-    selectRate(index) {
+    onSelect(index) {
       if (!this.disabled) {
         this.$emit('input', index + 1);
       }

packages/vant-css/src/rate.css

@@ -4,7 +4,8 @@
   user-select: none;
 
   &__item {
-    margin: 0 2px;
+    padding: 0 2px;
     display: inline-block;
+    box-sizing: content-box;
   }
 }