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

src/rate/demo/index.vue

@@ -41,10 +41,7 @@
     </demo-block>
 
     <demo-block :title="$t('changeEvent')">
-      <van-rate
+      <van-rate v-model="value7" @change="onChange" />
-        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>
 

src/rate/index.js

@@ -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={() => {

src/rate/index.less

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

src/rate/test/__snapshots__/demo.spec.js.snap

@@ -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>

src/style/var.less

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