diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue
index effc77b5..5bbeb849 100644
--- a/docs/src/Preview.vue
+++ b/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 {
diff --git a/example/app.json b/example/app.json
index 10bd3994..a6d39e66 100644
--- a/example/app.json
+++ b/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"
}
}
diff --git a/example/config.js b/example/config.js
index 5080b966..5c7c562d 100644
--- a/example/config.js
+++ b/example/config.js
@@ -47,6 +47,10 @@ export default [
path: '/radio',
title: 'Radio 单选框'
},
+ {
+ path: '/rate',
+ title: 'Rate 评分'
+ },
{
path: '/search',
title: 'Search 搜索'
diff --git a/example/pages/rate/index.js b/example/pages/rate/index.js
new file mode 100644
index 00000000..ad5e96d6
--- /dev/null
+++ b/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
+ });
+ }
+});
diff --git a/example/pages/rate/index.json b/example/pages/rate/index.json
new file mode 100644
index 00000000..0fa0cccd
--- /dev/null
+++ b/example/pages/rate/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "Rate 评分"
+}
diff --git a/example/pages/rate/index.wxml b/example/pages/rate/index.wxml
new file mode 100644
index 00000000..288cab07
--- /dev/null
+++ b/example/pages/rate/index.wxml
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/rate/index.wxss b/example/pages/rate/index.wxss
new file mode 100644
index 00000000..31253f32
--- /dev/null
+++ b/example/pages/rate/index.wxss
@@ -0,0 +1,3 @@
+.van-rate {
+ margin-left: 15px;
+}
diff --git a/packages/rate/README.md b/packages/rate/README.md
new file mode 100644
index 00000000..4f65e941
--- /dev/null
+++ b/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
+
+```
+
+```javascript
+Page({
+ data: {
+ value: 3
+ },
+
+ onChange(event) {
+ this.setData({
+ value: event.detail
+ });
+ }
+});
+```
+
+#### 自定义颜色
+
+```html
+
+```
+
+#### 禁用状态
+
+```html
+
+```
+
+### 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 | 根节点样式类 |
diff --git a/packages/rate/index.json b/packages/rate/index.json
new file mode 100644
index 00000000..0a336c08
--- /dev/null
+++ b/packages/rate/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-icon": "../icon/index"
+ }
+}
diff --git a/packages/rate/index.less b/packages/rate/index.less
new file mode 100644
index 00000000..50a7b8aa
--- /dev/null
+++ b/packages/rate/index.less
@@ -0,0 +1,9 @@
+.van-rate {
+ user-select: none;
+
+ &__item {
+ width: 1em;
+ padding: 0 2px;
+ box-sizing: content-box;
+ }
+}
diff --git a/packages/rate/index.ts b/packages/rate/index.ts
new file mode 100644
index 00000000..e56736ef
--- /dev/null
+++ b/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
+ });
+ }
+ });
+ }
+ }
+});
diff --git a/packages/rate/index.wxml b/packages/rate/index.wxml
new file mode 100644
index 00000000..8ac26e31
--- /dev/null
+++ b/packages/rate/index.wxml
@@ -0,0 +1,15 @@
+
+
+