From 04a017136efc6de8837a11003edaad94e201901a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 28 May 2019 19:46:59 +0800 Subject: [PATCH] [new feature] Rate: add gutter prop --- docs/markdown/changelog.zh-CN.md | 6 ++ packages/rate/en-US.md | 1 + packages/rate/index.less | 8 ++- packages/rate/index.tsx | 17 ++++- .../rate/test/__snapshots__/demo.spec.js.snap | 72 +++++++++---------- .../test/__snapshots__/index.spec.js.snap | 16 +++++ packages/rate/test/index.spec.js | 10 +++ packages/rate/zh-CN.md | 1 + packages/style/var.less | 2 +- 9 files changed, 91 insertions(+), 42 deletions(-) create mode 100644 packages/rate/test/__snapshots__/index.spec.js.snap diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 62ab668ce..dbb992a08 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -1,5 +1,11 @@ # 更新日志 +### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3) + +##### Rate + +- 新增`guter`属性 + ### [v2.0.0-beta.2](https://github.com/youzan/vant/tree/v2.0.0-beta.2) #### 无障碍访问 diff --git a/packages/rate/en-US.md b/packages/rate/en-US.md index 6a9df5304..135b78ef5 100644 --- a/packages/rate/en-US.md +++ b/packages/rate/en-US.md @@ -96,6 +96,7 @@ export default { | v-model | Current rate | `Number` | - | | count | Count | `Number` | `5` | | size | Icon size (px) | `Number` | `20` | +| gutter | Icon gutter | `String | Number` | `4px` | | color | Selected color | `String` | `#ffd21e` | | void-color | Void color | `String` | `#c7c7c7` | | icon | Selected icon | `String` | `star` | diff --git a/packages/rate/index.less b/packages/rate/index.less index 8fae1cf7a..bd0f389fe 100644 --- a/packages/rate/index.less +++ b/packages/rate/index.less @@ -6,16 +6,20 @@ &__item { position: relative; display: inline-block; - padding: 0 @rate-horizontal-padding; + + &:not(:last-child) { + padding-right: @rate-icon-gutter; + } } &__icon { + display: block; width: 1em; &--half { position: absolute; top: 0; - left: @rate-horizontal-padding; + left: 0; width: .5em; overflow: hidden; } diff --git a/packages/rate/index.tsx b/packages/rate/index.tsx index 697935021..3df23f936 100644 --- a/packages/rate/index.tsx +++ b/packages/rate/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable prefer-spread */ -import { use } from '../utils'; +import { use, suffixPx } from '../utils'; import { emit, inherit } from '../utils/functional'; import { preventDefault } from '../utils/event'; import Icon from '../icon'; @@ -16,6 +16,7 @@ export type RateProps = { count: number; color: string; value: number; + gutter?: string | number; voidIcon: string; voidColor: string; readonly?: boolean; @@ -51,6 +52,7 @@ function Rate( icon, size, color, + count, voidIcon, readonly, disabled, @@ -59,7 +61,7 @@ function Rate( } = props; const list: RateStatus[] = []; - for (let i = 1; i <= props.count; i++) { + for (let i = 1; i <= count; i++) { list.push(getRateStatus(props.value, i, props.allowHalf)); } @@ -89,18 +91,26 @@ function Rate( } } + const gutter = suffixPx(props.gutter); + function renderStar(status: RateStatus, index: number) { const isFull = status === 'full'; const isVoid = status === 'void'; const score = index + 1; + let style; + if (gutter && score !== count) { + style = { paddingRight: gutter }; + } + return (