[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>