[new feature] Rate: 增加新组件 rate (#931)

docs/src/Preview.vue

@@ -48,7 +48,8 @@ const MAP = {
   toast: 'toast-201808191046.png',
   transition: 'transition-20180821.png',
   'tree-select': 'tree-select-201808092138.png',
-  checkbox: 'checkbox-20181110.jpeg'
+  checkbox: 'checkbox-20181110.jpeg',
+  rate: 'rate-20181120-1.png'
 };
 
 export default {

example/app.json

@@ -35,7 +35,8 @@
     "pages/checkbox/index",
     "pages/goods-action/index",
     "pages/swipe-cell/index",
-    "pages/datetime-picker/index"
+    "pages/datetime-picker/index",
+    "pages/rate/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",
@@ -89,6 +90,7 @@
     "van-toast": "../../dist/toast/index",
     "van-transition": "../../dist/transition/index",
     "van-tree-select": "../../dist/tree-select/index",
-    "van-datetime-picker": "../../dist/datetime-picker/index"
+    "van-datetime-picker": "../../dist/datetime-picker/index",
+    "van-rate": "../../dist/rate/index"
   }
 }

example/config.js

@@ -47,6 +47,10 @@ export default [
         path: '/radio',
         title: 'Radio 单选框'
       },
+      {
+        path: '/rate',
+        title: 'Rate 评分'
+      },
       {
         path: '/search',
         title: 'Search 搜索'

example/pages/rate/index.js

@@ -0,0 +1,16 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    value1: 3,
+    value2: 4,
+    value3: 2
+  },
+
+  onChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({
+      [key]: event.detail
+    });
+  }
+});

example/pages/rate/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Rate 评分"
+}

example/pages/rate/index.wxml

@@ -0,0 +1,29 @@
+<demo-block title="基础用法">
+  <van-rate
+    custom-class="van-rate"
+    data-key="value1"
+    value="{{ value1 }}"
+  />
+</demo-block>
+
+<demo-block title="自定义颜色">
+  <van-rate
+    custom-class="van-rate"
+    data-key="value2"
+    value="{{ value2 }}"
+    size="{{ 25 }}"
+    count="{{ 6 }}"
+    color="#2ba"
+    void-color="#ceefe8"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="禁用状态">
+  <van-rate
+    custom-class="van-rate"
+    data-key="value3"
+    value="{{ value3 }}"
+    disabled
+  />
+</demo-block>

example/pages/rate/index.wxss

@@ -0,0 +1,3 @@
+.van-rate {
+  margin-left: 15px;
+}

packages/rate/README.md

@@ -0,0 +1,76 @@
+## Rate 评分
+
+### 使用指南
+在 app.json 或 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-rate": "path/to/vant-weapp/dist/rate/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 3
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail
+    });
+  }
+});
+```
+
+#### 自定义颜色
+
+```html
+<van-rate
+  value="{{ value }}"
+  bind:change="onChange"
+  size="{{ 25 }}"
+  count="{{ 6 }}"
+  color="#2ba"
+  void-color="#ceefe8"
+/>
+```
+
+#### 禁用状态
+
+```html
+ <van-rate value="{{ value }}" bind:change="onChange" disabled />
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| name | 在表单内提交时的标识符 | `String` | - |
+| value | 当前分值 | `Number` | - |
+| count | 图标总数 | `Number` | `5` |
+| size | 图标大小 (px) | `Number` | `20` |
+| color | 选中时的颜色 | `String` | `#ffd21e`  |
+| void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
+| readonly | 是否为只读状态 | `Boolean` | `false` |
+| disabled | 是否禁用评分 | `Boolean` | `false` |
+| disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` |
+
+### Event
+
+| 事件名称 | 说明 | 回调参数 |
+|------|------|------|
+| change | 当前分值变化时触发的事件 | 当前分值 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |

packages/rate/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

packages/rate/index.less

@@ -0,0 +1,9 @@
+.van-rate {
+  user-select: none;
+
+  &__item {
+    width: 1em;
+    padding: 0 2px;
+    box-sizing: content-box;
+  }
+}

packages/rate/index.ts

@@ -0,0 +1,85 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  field: true,
+
+  props: {
+    readonly: Boolean,
+    disabled: Boolean,
+    size: {
+      type: Number,
+      value: 20
+    },
+    color: {
+      type: String,
+      value: '#ffd21e'
+    },
+    voidColor: {
+      type: String,
+      value: '#c7c7c7'
+    },
+    disabledColor: {
+      type: String,
+      value: '#bdbdbd'
+    },
+    count: {
+      type: Number,
+      value: 5
+    },
+    value: {
+      type: Number,
+      value: 0
+    }
+  },
+
+  data: {
+    innerValue: 0
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.data.innerValue) {
+        this.setData({ 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;
+      if (!data.disabled && !data.readonly) {
+        this.setData({ innerValue: index + 1 });
+        this.$emit('input', index + 1);
+        this.$emit('change', index + 1);
+      }
+    },
+
+    onTouchMove(event: Weapp.TouchEvent) {
+      const { clientX, clientY } = event.touches[0];
+
+      this.getRect('.van-rate__item', true).then(list => {
+        const target = list.find(
+          item =>
+            clientX >= item.left &&
+            clientX <= item.right &&
+            clientY >= item.top &&
+            clientY <= item.bottom
+        );
+        if (target != null) {
+          this.onSelect({
+            ...event,
+            currentTarget: target
+          });
+        }
+      });
+    }
+  }
+});

packages/rate/index.wxml

@@ -0,0 +1,15 @@
+<view
+  class="van-rate custom-class"
+  bind:touchmove="onTouchMove"
+>
+  <van-icon
+    wx:for="{{ list }}"
+    wx:key="index"
+    class="van-rate__item"
+    size="{{ size }}px"
+    data-index="{{ index }}"
+    name="{{ item ? 'star' : 'star-o' }}"
+    color="{{ disabled ? disabledColor : item ? color : voidColor }}"
+    bind:click="onSelect"
+  />
+</view>