[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 -   滑块'

packages/index.js

@@ -48,6 +48,7 @@ import RadioGroup from './radio-group';
 import Row from './row';
 import Search from './search';
 import Sku from './sku';
+import StarRate from './star-rate';
 import Slider from './slider';
 import Step from './step';
 import Stepper from './stepper';
@@ -117,6 +118,7 @@ const components = [
   Row,
   Search,
   Sku,
+  StarRate,
   Slider,
   Step,
   Stepper,
@@ -198,6 +200,7 @@ export {
   Row,
   Search,
   Sku,
+  StarRate,
   Slider,
   Step,
   Stepper,

packages/star-rate/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="van-star">
+    <div
+      class="van-star-item van-star--full"
+      v-for="(isFull, index) in starList"
+      :key="index"
+      :style="{
+        'width': `${size}px`
+      }"
+      @click="selectRate(index)"
+    >
+      <svg
+        v-if="isFull"
+        :fill="disabled ? defaultColor : color"
+        xmlns="http://www.w3.org/2000/svg"
+        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"
+        xmlns="http://www.w3.org/2000/svg"
+        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>
+import create from '../utils/create';
+
+export default create({
+  name: 'star-rate',
+
+  props: {
+    size: {
+      type: Number,
+      default: 20
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: '#ffd21e'
+    },
+    defaultColor: {
+      type: String,
+      default: '#c7c7c7'
+    },
+    disabledColor: {
+      type: String,
+      default: '#bdbdbd'
+    },
+    total: {
+      type: Number,
+      default: 5
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    starList() {
+      return new Array(this.total).fill(false).map((value, index) => index < this.value);
+    }
+  },
+
+  methods: {
+    selectRate(index) {
+      if (this.disabled) return;
+      this.$emit('input', index + 1);
+    }
+  }
+});
+</script>

packages/vant-css/src/index.css

@@ -24,6 +24,7 @@
 @import './tabbar.css';
 @import './image-preview.css';
 @import './stepper.css';
+@import './star-rate.css';
 @import './progress.css';
 @import './swipe.css';
 @import './slider.css';

packages/vant-css/src/star-rate.css

@@ -0,0 +1,8 @@
+.van-star {
+  user-select: none;
+}
+
+.van-star-item {
+  margin: 0 2px;
+  display: inline-block;
+}