blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-30 10:19:15 +08:00
Code Issues Projects Releases Wiki Activity

feat(Rate): add @rate-icon-full-color less var

Browse Source
This commit is contained in:
陈嘉涵 2020-01-27 15:13:48 +08:00
parent 8b8471945c
commit 5c804cf920
4 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/rate/index.js
View File

@ -22,6 +22,7 @@ export default createComponent({
props: { props: {
size: [Number, String], size: [Number, String],
color: String,
gutter: [Number, String], gutter: [Number, String],
readonly: Boolean, readonly: Boolean,
disabled: Boolean, disabled: Boolean,
@ -39,10 +40,6 @@ export default createComponent({
type: String, type: String,
default: 'star-o', default: 'star-o',
}, },
color: {
type: String,
default: '#ffd21e',
},
voidColor: { voidColor: {
type: String, type: String,
default: '#c7c7c7', default: '#c7c7c7',
@ -172,7 +169,7 @@ export default createComponent({
<Icon <Icon
size={this.sizeWithUnit} size={this.sizeWithUnit}
name={isFull ? icon : voidIcon} name={isFull ? icon : voidIcon}
class={bem('icon', { disabled })} class={bem('icon', { disabled, full: isFull })}
data-score={score} data-score={score}
color={disabled ? disabledColor : isFull ? color : voidColor} color={disabled ? disabledColor : isFull ? color : voidColor}
onClick={() => { onClick={() => {
@ -183,7 +180,7 @@ export default createComponent({
<Icon <Icon
size={this.sizeWithUnit} size={this.sizeWithUnit}
name={isVoid ? voidIcon : icon} name={isVoid ? voidIcon : icon}
class={bem('icon', ['half', { disabled }])} class={bem('icon', ['half', { disabled, full: !isVoid }])}
data-score={score - 0.5} data-score={score - 0.5}
color={disabled ? disabledColor : isVoid ? voidColor : color} color={disabled ? disabledColor : isVoid ? voidColor : color}
onClick={() => { onClick={() => {

4
src/rate/index.less
View File

@ -26,6 +26,10 @@
overflow: hidden; overflow: hidden;
} }
&--full {
color: @rate-icon-full-color;
}
&--disabled { &--disabled {
color: @rate-icon-disabled-color; color: @rate-icon-disabled-color;
} }

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

@ -4,11 +4,11 @@ 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-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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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> <!----></i></div>
@ -18,11 +18,11 @@ 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-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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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> <!----></i></div>
@ -32,11 +32,11 @@ 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-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(238, 10, 36); 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 van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
<!----></i></div> <!----></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(238, 10, 36); 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 van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
<!----></i></div> <!----></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(238, 10, 36); 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 van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
<!----></i></div> <!----></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 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>
@ -46,14 +46,14 @@ 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-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;"> <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 van-rate__icon--full" style="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 van-rate__icon--full" style="font-size: 25px;">
<!----></i></div> <!----></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: 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 van-rate__icon--full" style="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 van-rate__icon--full" style="font-size: 25px;">
<!----></i></div> <!----></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(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 van-rate__icon--full" style="font-size: 25px;">
<!----></i></div> <!----></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 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;">
@ -65,13 +65,13 @@ 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-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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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> <!----></i></div>
@ -81,11 +81,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled"> <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
<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 van-rate__icon--disabled"> <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 van-rate__icon--disabled van-rate__icon--full">
<!----></i></div> <!----></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 van-rate__icon--disabled"> <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 van-rate__icon--disabled van-rate__icon--full">
<!----></i></div> <!----></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 van-rate__icon--disabled"> <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 van-rate__icon--disabled van-rate__icon--full">
<!----></i></div> <!----></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 van-rate__icon--disabled"> <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 van-rate__icon--disabled">
<!----></i></div> <!----></i></div>
@ -95,11 +95,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly"> <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
<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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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> <!----></i></div>
@ -109,9 +109,9 @@ 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-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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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 van-rate__icon--full">
<!----></i></div> <!----></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);"> <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);">
<!----></i></div> <!----></i></div>

1
src/style/var.less
View File

@ -550,6 +550,7 @@
// Rate // Rate
@rate-icon-size: 20px; @rate-icon-size: 20px;
@rate-icon-gutter: 4px; @rate-icon-gutter: 4px;
@rate-icon-full-color: #ffd21e;
@rate-icon-disabled-color: #bdbdbd; @rate-icon-disabled-color: #bdbdbd;
// Search // Search