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

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

Browse Source
This commit is contained in:
陈嘉涵 2020-01-27 15:05:50 +08:00
parent ea74194990
commit 8b8471945c
5 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/rate/demo/index.vue
View File

@ -41,10 +41,7 @@
</demo-block>
<demo-block :title="$t('changeEvent')">
<van-rate
v-model="value7"
@change="onChange"
/>
<van-rate v-model="value7" @change="onChange" />
</demo-block>
</demo-section>
</template>
@ -60,7 +57,7 @@ export default {
customCount: '自定义数量',
readonly: '只读状态',
changeEvent: '监听 change 事件',
toastContent: (value) => `当前值：${value}`
toastContent: value => `当前值：${value}`,
},
'en-US': {
halfStar: 'Half Star',
@ -70,8 +67,8 @@ export default {
customCount: 'Custom Count',
readonly: 'Readonly',
changeEvent: 'Change Event',
toastContent: (value) => `current value：${value}`
}
toastContent: value => `current value：${value}`,
},
},
data() {
@ -82,7 +79,7 @@ export default {
value4: 2.5,
value5: 4,
value6: 3,
value7: 2
value7: 2,
};
},
@ -90,8 +87,8 @@ export default {
onChange(value) {
this.value7 = value;
this.$toast(this.$t('toastContent', value));
}
}
},
},
};
</script>

9
src/rate/index.js
View File

@ -26,6 +26,7 @@ export default createComponent({
readonly: Boolean,
disabled: Boolean,
allowHalf: Boolean,
disabledColor: String,
value: {
type: Number,
default: 0,
@ -46,10 +47,6 @@ export default createComponent({
type: String,
default: '#c7c7c7',
},
disabledColor: {
type: String,
default: '#bdbdbd',
},
count: {
type: Number,
default: 5,
@ -175,7 +172,7 @@ export default createComponent({
<Icon
size={this.sizeWithUnit}
name={isFull ? icon : voidIcon}
class={bem('icon')}
class={bem('icon', { disabled })}
data-score={score}
color={disabled ? disabledColor : isFull ? color : voidColor}
onClick={() => {
@ -186,7 +183,7 @@ export default createComponent({
<Icon
size={this.sizeWithUnit}
name={isVoid ? voidIcon : icon}
class={bem('icon', 'half')}
class={bem('icon', ['half', { disabled }])}
data-score={score - 0.5}
color={disabled ? disabledColor : isVoid ? voidColor : color}
onClick={() => {

4
src/rate/index.less
View File

@ -25,6 +25,10 @@
width: 0.5em;
overflow: hidden;
}
&--disabled {
color: @rate-icon-disabled-color;
}
}
&--disabled {

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

@ -81,15 +81,15 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<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" style="color: rgb(189, 189, 189);">
<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">
<!----></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);">
<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">
<!----></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);">
<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">
<!----></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);">
<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>
<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);">
<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 van-rate__icon--disabled">
<!----></i></div>
</div>
</div>

1
src/style/var.less
View File

@ -550,6 +550,7 @@
// Rate
@rate-icon-size: 20px;
@rate-icon-gutter: 4px;
@rate-icon-disabled-color: #bdbdbd;
// Search
@search-padding: 10px @padding-sm;