[new feature] Rate: add new prop allow-half

fix #1003

example/pages/rate/index.js

@@ -5,8 +5,9 @@ Page({
     value1: 3,
     value2: 3,
     value3: 3,
-    value4: 4,
+    value4: 2.5,
-    value5: 3
+    value5: 4,
+    value6: 3
   },
 
   onChange(event) {

example/pages/rate/index.wxml

@@ -29,11 +29,25 @@
   />
 </demo-block>
 
-<demo-block title="自定义数量">
+<demo-block title="半星">
   <van-rate
     custom-class="van-rate"
     data-key="value4"
     value="{{ value4 }}"
+    size="{{ 25 }}"
+    allow-half
+    color="#f44"
+    void-color="#eee"
+    void-icon="star"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="自定义数量">
+  <van-rate
+    custom-class="van-rate"
+    data-key="value5"
+    value="{{ value5 }}"
     count="{{ 6 }}"
     bind:change="onChange"
   />
@@ -42,8 +56,8 @@
 <demo-block title="禁用状态">
   <van-rate
     custom-class="van-rate"
-    data-key="value5"
+    data-key="value6"
-    value="{{ value5 }}"
+    value="{{ value6 }}"
     disabled
   />
 </demo-block>
@@ -51,8 +65,8 @@
 <demo-block title="只读状态">
   <van-rate
     custom-class="van-rate"
-    data-key="value5"
+    data-key="value6"
-    value="{{ value5 }}"
+    value="{{ value6 }}"
     readonly
   />
 </demo-block>

packages/common/style/var.less

@@ -123,3 +123,6 @@
 
 // NavBar
 @nav-bar-height: 44px;
+
+// Rate
+@rate-horizontal-padding: 2px;

packages/rate/README.md

@@ -63,6 +63,19 @@ Page({
 />
 ```
 
+#### 半星
+```html
+<van-rate
+  value="{{ value }}"
+  size="{{ 25 }}"
+  allow-half
+  color="#f44"
+  void-color="#eee"
+  void-icon="star"
+  bind:change="onChange"
+/>
+```
+
 #### 自定义数量
 
 ```html
@@ -105,6 +118,7 @@ Page({
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
 | icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` |
 | void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o` |
+| allow-half | 是否允许半选 | `Boolean` | `false` |
 | readonly | 是否为只读状态 | `Boolean` | `false` |
 | disabled | 是否禁用评分 | `Boolean` | `false` |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` |

packages/rate/index.less

@@ -1,9 +1,24 @@
+@import '../common/style/var.less';
+
 .van-rate {
   user-select: none;
 
   &__item {
-    width: 1em;
+    position: relative;
-    padding: 0 2px;
+    display: inline-block;
-    box-sizing: content-box;
+    padding: 0 @rate-horizontal-padding;
+  }
+
+  &__icon {
+    display: block;
+    height: 1em;
+
+    &--half {
+      position: absolute;
+      top: 0;
+      left: @rate-horizontal-padding;
+      width: 0.5em;
+      overflow: hidden;
+    }
   }
 }

packages/rate/index.ts

@@ -6,8 +6,10 @@ VantComponent({
   classes: ['icon-class'],
 
   props: {
+    value: Number,
     readonly: Boolean,
     disabled: Boolean,
+    allowHalf: Boolean,
     size: {
       type: Number,
       value: 20
@@ -35,10 +37,6 @@ VantComponent({
     count: {
       type: Number,
       value: 5
-    },
-    value: {
-      type: Number,
-      value: 0
     }
   },
 
@@ -47,49 +45,46 @@ VantComponent({
   },
 
   watch: {
-    value(value) {
+    value(value: number) {
       if (value !== this.data.innerValue) {
         this.set({ innerValue: value });
       }
     }
   },
 
-  computed: {
-    list() {
-      const { count, innerValue } = this.data;
-      return Array.from({ length: count }, (_, index) => index < innerValue);
-    }
-  },
-
   methods: {
     onSelect(event: Weapp.Event) {
       const { data } = this;
-      const { index } = event.currentTarget.dataset;
+      const { score } = event.currentTarget.dataset;
       if (!data.disabled && !data.readonly) {
-        this.set({ innerValue: index + 1 });
+        this.set({ innerValue: score + 1 });
-        this.$emit('input', index + 1);
+        this.$emit('input', score + 1);
-        this.$emit('change', index + 1);
+        this.$emit('change', score + 1);
       }
     },
 
     onTouchMove(event: Weapp.TouchEvent) {
       const { clientX, clientY } = event.touches[0];
 
-      this.getRect('.van-rate__item', true).then(list => {
+      this.getRect('.van-rate__icon', true).then(
-        const target = list.find(
+        (list: wx.BoundingClientRectCallbackResult[]) => {
-          item =>
+          const target = list
-            clientX >= item.left &&
+            .sort(item => item.right - item.left)
-            clientX <= item.right &&
+            .find(
-            clientY >= item.top &&
+              item =>
-            clientY <= item.bottom
+                clientX >= item.left &&
-        );
+                clientX <= item.right &&
-        if (target != null) {
+                clientY >= item.top &&
-          this.onSelect({
+                clientY <= item.bottom
-            ...event,
+            );
-            currentTarget: target
+          if (target != null) {
-          });
+            this.onSelect({
+              ...event,
+              currentTarget: target
+            });
+          }
         }
-      });
+      );
     }
   }
 });

packages/rate/index.wxml

@@ -1,16 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="van-rate custom-class"
   bind:touchmove="onTouchMove"
 >
-  <van-icon
+  <view
-    wx:for="{{ list }}"
-    wx:key="index"
     class="van-rate__item"
-    custom-class="icon-class"
+    wx:for="{{ count }}"
-    size="{{ size }}px"
+    wx:key="index"
-    data-index="{{ index }}"
+    style="font-size: {{ size}}px;"
-    name="{{ item ? icon : voidIcon }}"
+  >
-    color="{{ disabled ? disabledColor : item ? color : voidColor }}"
+    <van-icon
-    bind:click="onSelect"
+      name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
-  />
+      class="van-rate__icon"
+      custom-class="icon-class"
+      data-score="{{ index }}"
+      color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
+      bind:click="onSelect"
+    />
+
+    <van-icon
+      wx:if="{{ allowHalf }}"
+      name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
+      class="{{ utils.bem('rate__icon', ['half']) }}"
+      custom-class="icon-class"
+      data-score="{{ index - 0.5 }}"
+      color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"
+      bind:click="onSelect"
+    />
+  </view>
 </view>