[new feature] add StarRate component

docs/demos/index.js

@@ -59,6 +59,7 @@ export default {
   'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/radio'), 'radio')), 'radio')),
   'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/search'), 'search')), 'search')),
   'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/sku'), 'sku')), 'sku')),
+  'star-rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/star-rate'), 'star-rate')), 'star-rate')),
   'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/slider'), 'slider')), 'slider')),
   'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/stepper'), 'stepper')), 'stepper')),
   'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/steps'), 'steps')), 'steps')),

docs/demos/views/star-rate.vue

@@ -0,0 +1,83 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="padding-15">
+        <van-star-rate
+          :total="totalA"
+          v-model="valueA"
+          :size="size"
+        />
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <div class="padding-15">
+        <van-star-rate
+          :total="totalB"
+          v-model="valueB"
+          :size="24"
+          :color="'#2ba'"
+          :default-color="'#ceefe8'"
+        />
+      </div>
+    </demo-block>
+
+     <demo-block :title="$t('disabled')">
+      <div class="padding-15">
+        <van-star-rate
+          disabled
+          :total="totalC"
+          v-model="valueC"
+        />
+      </div>
+    </demo-block>
+
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      disabled: '不可操作状态',
+      customColor: '自定义颜色'
+    },
+    'en-US': {
+      disabled: 'Disabled Component',
+      customColor: 'Custom Color'
+    }
+  },
+
+  data() {
+    return {
+      size: 30,
+      totalA: 7,
+      valueA: 5,
+      totalB: 6,
+      valueB: 4,
+      totalC: 8,
+      valueC: 2
+    };
+  },
+
+  methods: {
+    onSearch() {
+      Toast(this.value);
+    },
+    onCancel() {
+      Toast(this.$t('cancel'));
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-search {
+  .van-search__action div {
+    padding: 0 10px;
+  }
+}
+.padding-15 {
+  padding: 0 15px;
+}
+</style>

docs/markdown/zh-CN/star-rate.md

@@ -0,0 +1,92 @@
+## StarRate 评分
+
+### 使用指南
+``` javascript
+import { StarRate } from 'vant';
+
+Vue.use(StarRate);
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-star-rate
+  :total="total"
+  v-model="value"
+  :size="30"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      size: 30,
+      value: 3,
+      total: 6
+    };
+  }
+}
+```
+
+#### 自定义颜色
+
+```html
+<van-star-rate
+  :total="total"
+  v-model="value"
+  :size="size",
+  :color="color",
+  :defaultColor="defaultColor"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      size: 24,
+      value: 5,
+      total: 7,
+      color: '#2ba',
+      defaultColor: '#ceefe8'
+    };
+  }
+}
+```
+
+
+#### 竖向步骤条
+```html
+ <van-star-rate
+  disabled
+  :total="total"
+  v-model="value"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 2,
+      total: 6
+    };
+  }
+}
+```
+
+### StarRate API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| size | 星标大小，单位为`px` | `Number` | 20 | - |
+| total | 总分，默认为5 | `Number` | 5 | - |
+| value | 分数 | `Number` | 0 | - |
+| color | 选中时的星标颜色 | `String` | `#ffd21e`  | - |
+| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` | - |
+| disabled-color | 不可选时的星标颜色 | `String` | `bdbdbd` | - |
+| disabled | 是否可修改 | `Boolean` | false | - |
+

docs/src/doc.config.js

@@ -136,6 +136,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress - 进度条'
               },
+              {
+                path: '/star-rate',
+                title: 'StarRate - 评分'
+              },
               {
                 path: '/slider',
                 title: 'Slider -   滑块'