From 60b6dc324ae0ccb7e643315e8e39d535566e7d80 Mon Sep 17 00:00:00 2001 From: rex Date: Fri, 23 Nov 2018 20:12:14 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20Rate:=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6=20rate=20(#931)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/Preview.vue | 3 +- example/app.json | 6 ++- example/config.js | 4 ++ example/pages/rate/index.js | 16 +++++++ example/pages/rate/index.json | 3 ++ example/pages/rate/index.wxml | 29 ++++++++++++ example/pages/rate/index.wxss | 3 ++ packages/rate/README.md | 76 +++++++++++++++++++++++++++++++ packages/rate/index.json | 6 +++ packages/rate/index.less | 9 ++++ packages/rate/index.ts | 85 +++++++++++++++++++++++++++++++++++ packages/rate/index.wxml | 15 +++++++ 12 files changed, 252 insertions(+), 3 deletions(-) create mode 100644 example/pages/rate/index.js create mode 100644 example/pages/rate/index.json create mode 100644 example/pages/rate/index.wxml create mode 100644 example/pages/rate/index.wxss create mode 100644 packages/rate/README.md create mode 100644 packages/rate/index.json create mode 100644 packages/rate/index.less create mode 100644 packages/rate/index.ts create mode 100644 packages/rate/index.wxml 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 @@ + + +