blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Rate: add gutter prop

Browse Source
This commit is contained in:
陈嘉涵 2019-05-28 19:46:59 +08:00
parent ce8a2d2223
commit 04a017136e
9 changed files with 91 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/markdown/changelog.zh-CN.md
View File

@ -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) ### [v2.0.0-beta.2](https://github.com/youzan/vant/tree/v2.0.0-beta.2)
#### 无障碍访问 #### 无障碍访问

1
packages/rate/en-US.md
View File

@ -96,6 +96,7 @@ export default {
| v-model | Current rate | `Number` | - | | v-model | Current rate | `Number` | - |
| count | Count | `Number` | `5` | | count | Count | `Number` | `5` |
| size | Icon size (px) | `Number` | `20` | | size | Icon size (px) | `Number` | `20` |
| gutter | Icon gutter | `String | Number` | `4px` |
| color | Selected color | `String` | `#ffd21e` | | color | Selected color | `String` | `#ffd21e` |
| void-color | Void color | `String` | `#c7c7c7` | | void-color | Void color | `String` | `#c7c7c7` |
| icon | Selected icon | `String` | `star` | | icon | Selected icon | `String` | `star` |

8
packages/rate/index.less
View File

@ -6,16 +6,20 @@
&__item { &__item {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 0 @rate-horizontal-padding;
&:not(:last-child) {
padding-right: @rate-icon-gutter;
}
} }
&__icon { &__icon {
display: block;
width: 1em; width: 1em;
&--half { &--half {
position: absolute; position: absolute;
top: 0; top: 0;
left: @rate-horizontal-padding; left: 0;
width: .5em; width: .5em;
overflow: hidden; overflow: hidden;
} }

17
packages/rate/index.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable prefer-spread */ /* eslint-disable prefer-spread */
import { use } from '../utils'; import { use, suffixPx } from '../utils';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import { preventDefault } from '../utils/event'; import { preventDefault } from '../utils/event';
import Icon from '../icon'; import Icon from '../icon';
@ -16,6 +16,7 @@ export type RateProps = {
count: number; count: number;
color: string; color: string;
value: number; value: number;
gutter?: string | number;
voidIcon: string; voidIcon: string;
voidColor: string; voidColor: string;
readonly?: boolean; readonly?: boolean;
@ -51,6 +52,7 @@ function Rate(
icon, icon,
size, size,
color, color,
count,
voidIcon, voidIcon,
readonly, readonly,
disabled, disabled,
@ -59,7 +61,7 @@ function Rate(
} = props; } = props;
const list: RateStatus[] = []; 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)); 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) { function renderStar(status: RateStatus, index: number) {
const isFull = status === 'full'; const isFull = status === 'full';
const isVoid = status === 'void'; const isVoid = status === 'void';
const score = index + 1; const score = index + 1;
let style;
if (gutter && score !== count) {
style = { paddingRight: gutter };
}
return ( return (
<div <div
key={index} key={index}
role="radio" role="radio"
style={style}
tabindex="0" tabindex="0"
aria-setsize={count}
aria-posinset={score} aria-posinset={score}
aria-setsize={props.count}
aria-checked={String(!isVoid)} aria-checked={String(!isVoid)}
class={bem('item')} class={bem('item')}
> >
@ -145,6 +155,7 @@ function Rate(
Rate.props = { Rate.props = {
value: Number, value: Number,
gutter: [String, Number],
readonly: Boolean, readonly: Boolean,
disabled: Boolean, disabled: Boolean,
allowHalf: Boolean, allowHalf: Boolean,

72
packages/rate/test/__snapshots__/demo.spec.js.snap
View File

@ -4,106 +4,106 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;"> <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;"> <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="6" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="6" aria-setsize="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>

16
packages/rate/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`gutter prop 1`] = `
<div tabindex="0" role="radiogroup" class="van-rate">
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div>
</div>
`;

10
packages/rate/test/index.spec.js
View File

@ -88,3 +88,13 @@ test('touchmove', () => {
expect(onChange).toHaveBeenNthCalledWith(2, 3); expect(onChange).toHaveBeenNthCalledWith(2, 3);
expect(onChange).toHaveBeenNthCalledWith(3, 4); expect(onChange).toHaveBeenNthCalledWith(3, 4);
}); });
test('gutter prop', () => {
const wrapper = mount(Rate, {
propsData: {
gutter: 10
}
});
expect(wrapper).toMatchSnapshot();
});

1
packages/rate/zh-CN.md
View File

@ -95,6 +95,7 @@ export default {
| v-model | 当前分值 | `Number` | - | - | | v-model | 当前分值 | `Number` | - | - |
| count | 图标总数 | `Number` | `5` | - | | count | 图标总数 | `Number` | `5` | - |
| size | 图标大小 (px) | `Number` | `20` | - | | size | 图标大小 (px) | `Number` | `20` | - |
| gutter | 图标间距，默认单位为`px` | `String | Number` | `4px` | 2.0.0 |
| color | 选中时的颜色 | `String` | `#ffd21e` | - | | color | 选中时的颜色 | `String` | `#ffd21e` | - |
| void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - | | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 | | icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |

2
packages/style/var.less
View File

@ -394,7 +394,7 @@
@radio-disabled-background-color: @border-color; @radio-disabled-background-color: @border-color;
// Rate // Rate
@rate-horizontal-padding: 2px; @rate-icon-gutter: 4px;
// Search // Search
@search-padding: 10px 16px; @search-padding: 10px 16px;