diff --git a/example/pages/rate/index.wxml b/example/pages/rate/index.wxml index 7f1839b5..29a7a9dd 100644 --- a/example/pages/rate/index.wxml +++ b/example/pages/rate/index.wxml @@ -3,6 +3,7 @@ custom-class="van-rate" data-key="value1" value="{{ value1 }}" + gutter="20px" /> diff --git a/packages/common/utils.ts b/packages/common/utils.ts index 064a17f9..08fca140 100644 --- a/packages/common/utils.ts +++ b/packages/common/utils.ts @@ -29,3 +29,12 @@ export function getSystemInfoSync() { return systemInfo; } + +export function addUnit(value?: string | number): string | undefined { + if (!isDef(value)) { + return undefined; + } + + value = String(value); + return isNumber(value) ? `${value}px` : value; +} diff --git a/packages/rate/README.md b/packages/rate/README.md index 6e497a58..e7efe7c5 100644 --- a/packages/rate/README.md +++ b/packages/rate/README.md @@ -104,7 +104,8 @@ Page({ | name | 在表单内提交时的标识符 | *string* | - | | value | 当前分值 | *number* | - | | count | 图标总数 | *number* | `5` | -| size | 图标大小 (px) | *number* | `20` | +| size | 图标大小 `px` | *number* | `20` | +| gutter | 图标间距,默认单位为 `px` | *string \| number* | `4px` | | color | 选中时的颜色 | *string* | `#ffd21e` | | void-color | 未选中时的颜色 | *string* | `#c7c7c7` | | icon | 选中时的图标名称或图片链接,可选值见 Icon 组件 | *string* | `star` | diff --git a/packages/rate/index.ts b/packages/rate/index.ts index bc4f65e2..50ec79fe 100644 --- a/packages/rate/index.ts +++ b/packages/rate/index.ts @@ -1,5 +1,6 @@ import { VantComponent } from '../common/component'; import { Weapp } from 'definitions/weapp'; +import { addUnit } from '../common/utils'; VantComponent({ field: true, @@ -38,11 +39,16 @@ VantComponent({ count: { type: Number, value: 5 - } + }, + gutter: { + type: null, + observer: 'setGutterWithUnit' + }, }, data: { - innerValue: 0 + innerValue: 0, + gutterWithUnit: undefined }, watch: { @@ -54,6 +60,12 @@ VantComponent({ }, methods: { + setGutterWithUnit(val) { + this.set({ + gutterWithUnit: addUnit(val) + }); + }, + onSelect(event: Weapp.Event) { const { data } = this; const { score } = event.currentTarget.dataset; diff --git a/packages/rate/index.wxml b/packages/rate/index.wxml index fc0d3200..b0c5c4bd 100644 --- a/packages/rate/index.wxml +++ b/packages/rate/index.wxml @@ -8,7 +8,7 @@ class="van-rate__item" wx:for="{{ count }}" wx:key="index" - style="font-size: {{ size}}px;" + style="font-size: {{ size }}px;padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}" >