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

[improvement] Rate: size prop support string type

Browse Source
This commit is contained in:
陈嘉涵 2019-05-28 19:53:00 +08:00
parent 04a017136e
commit 999be8064a
9 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
##### Rate
- 新增`guter`属性
- 支持`String`类型的`size`属性
### [v2.0.0-beta.2](https://github.com/youzan/vant/tree/v2.0.0-beta.2)

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

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

1
packages/rate/index.less
View File

@ -15,6 +15,7 @@
&__icon {
display: block;
width: 1em;
font-size: @rate-icon-size;
&--half {
position: absolute;

11
packages/rate/index.tsx
View File

@ -50,7 +50,6 @@ function Rate(
) {
const {
icon,
size,
color,
count,
voidIcon,
@ -97,6 +96,7 @@ function Rate(
const isFull = status === 'full';
const isVoid = status === 'void';
const score = index + 1;
const size = suffixPx(props.size);
let style;
if (gutter && score !== count) {
@ -115,8 +115,8 @@ function Rate(
class={bem('item')}
>
<Icon
size={size}
name={isFull ? icon : voidIcon}
size={`${size}px`}
class={bem('icon')}
data-score={score}
color={disabled ? disabledColor : isFull ? color : voidColor}
@ -126,8 +126,8 @@ function Rate(
/>
{props.allowHalf && (
<Icon
size={size}
name={isVoid ? voidIcon : icon}
size={`${size}px`}
class={bem('icon', 'half')}
data-score={score - 0.5}
color={disabled ? disabledColor : isVoid ? voidColor : color}
@ -155,14 +155,11 @@ function Rate(
Rate.props = {
value: Number,
size: [String, Number],
gutter: [String, Number],
readonly: Boolean,
disabled: Boolean,
allowHalf: Boolean,
size: {
type: Number,
default: 20
},
icon: {
type: String,
default: 'star'

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

@ -4,29 +4,29 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div tabindex="0" role="radiogroup" class="van-rate">
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></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;">
<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);">
<!----></i></div>
</div>
</div>
<div>
<div tabindex="0" role="radiogroup" class="van-rate">
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></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-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);">
<!----></i></div>
</div>
</div>
@ -65,45 +65,45 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div tabindex="0" role="radiogroup" class="van-rate">
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
</div>
</div>
<div>
<div tabindex="0" role="radiogroup" class="van-rate">
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></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(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);">
<!----></i></div>
</div>
</div>
<div>
<div tabindex="0" role="radiogroup" class="van-rate">
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></i></div>
<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;">
<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);">
<!----></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;">
<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);">
<!----></i></div>
</div>
</div>

25
packages/rate/test/__snapshots__/index.spec.js.snap
View File

@ -2,15 +2,30 @@
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;">
<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);">
<!----></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;">
<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);">
<!----></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;">
<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);">
<!----></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;">
<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);">
<!----></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;">
<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);">
<!----></i></div>
</div>
`;
exports[`size 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"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
<!----></i></div>
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
<!----></i></div>
<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: 2rem;">
<!----></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: 2rem;">
<!----></i></div>
</div>
`;

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

@ -98,3 +98,13 @@ test('gutter prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('size prop', () => {
const wrapper = mount(Rate, {
propsData: {
size: '2rem'
}
});
expect(wrapper).toMatchSnapshot();
});

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

@ -94,7 +94,7 @@ export default {
|------|------|------|------|------|
| v-model | 当前分值 | `Number` | - | - |
| count | 图标总数 | `Number` | `5` | - |
| size | 图标大小 (px) | `Number` | `20` | - |
| size | 图标大小，默认单位为`px` | `String | Number` | `20px` | - |
| gutter | 图标间距，默认单位为`px` | `String | Number` | `4px` | 2.0.0 |
| color | 选中时的颜色 | `String` | `#ffd21e` | - |
| void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |

1
packages/style/var.less
View File

@ -394,6 +394,7 @@
@radio-disabled-background-color: @border-color;
// Rate
@rate-icon-size: 20px;
@rate-icon-gutter: 4px;
// Search