From c34ec3f1f194c28f9a60c46c320b5e2cd4877d77 Mon Sep 17 00:00:00 2001
From: Simona <36978416+SimonaliaChen@users.noreply.github.com>
Date: Fri, 19 Apr 2019 11:08:30 +0800
Subject: [PATCH] Rate: add custom colors and icon-classes by passing a object
 (#15051)

---
 examples/demo-styles/rate.scss |  2 +-
 examples/docs/en-US/rate.md    | 18 ++++++-----
 examples/docs/es/rate.md       | 18 ++++++-----
 examples/docs/fr-FR/rate.md    | 20 ++++++------
 examples/docs/zh-CN/rate.md    | 18 ++++++-----
 packages/rate/src/main.vue     | 59 +++++++++++++++++-----------------
 src/utils/types.js             |  3 ++
 test/unit/specs/rate.spec.js   | 21 ++++++++++++
 types/rate.d.ts                | 20 +++++++++---
 9 files changed, 111 insertions(+), 68 deletions(-)
 create mode 100644 src/utils/types.js

diff --git a/examples/demo-styles/rate.scss b/examples/demo-styles/rate.scss
index 938c072f..b82b3552 100644
--- a/examples/demo-styles/rate.scss
+++ b/examples/demo-styles/rate.scss
@@ -3,7 +3,7 @@
   text-align: center;
   border-right: solid 1px #eff2f6;
   display: inline-block;
-  width: 50%;
+  width: 49%;
   box-sizing: border-box;
   &:last-child {
     border-right: none;
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index 36ddaab6..1eda81b9 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -4,7 +4,7 @@ Used for rating
 
 ### Basic usage
 
-:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
+:::demo Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`, or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
 
 ```html
 <div class="block">
@@ -15,7 +15,7 @@ Used for rating
   <span class="demonstration">Color for different levels</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -24,7 +24,8 @@ Used for rating
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -61,12 +62,12 @@ Using text to indicate rating score
 
 You can use different icons to distinguish different rate components.
 
-:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
+:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. In this example, we also use `void-icon-class` to set the icon if it is unselected.
 
 ```html
 <el-rate
   v-model="value"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -75,7 +76,8 @@ You can use different icons to distinguish different rate components.
   export default {
     data() {
       return {
-        value: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -119,10 +121,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | allow-half | whether picking half start is allowed | boolean | — | false |
 | low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
 | high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
-| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level  | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | color of unselected icons | string | — | #C6D1DE |
 | disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index 6cb6d88e..f6918207 100644
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
@@ -4,7 +4,7 @@ Usado para la calificación
 
 ### Uso básico
 
-:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
+:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
 
 
 ```html
@@ -16,7 +16,7 @@ Usado para la calificación
   <span class="demonstration">Color for different levels</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -25,7 +25,8 @@ Usado para la calificación
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -62,12 +63,12 @@ Usa texto para indicar la puntuación
 
 Puede utilizar iconos para diferenciar cada componente.
 
-:::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
+:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
 
 ```html
 <el-rate
   v-model="value"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -76,7 +77,8 @@ Puede utilizar iconos para diferenciar cada componente.
   export default {
     data() {
       return {
-        value: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -120,10 +122,10 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 | allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |
 | low-threshold            | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number  | —                | 2                                        |
 | high-threshold           | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number  | —                | 4                                        |
-| colors                   | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
+| colors                   | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object   | —         | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
 | void-color               | color para iconos no seleccionados       | string  | —                | #C6D1DE                                  |
 | disabled-void-color      | color para las iconos no seleccionados de solo lectura | string  | —                | #EFF2F7                                  |
-| icon-classes             | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes             | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class | array/object   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class          | nombre de clase para iconos no seleccionados | string  | —                | el-icon-star-off                         |
 | disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string  | —                | el-icon-star-on                          |
 | show-text                | muestra el texto                         | boolean | —                | false                                    |
diff --git a/examples/docs/fr-FR/rate.md b/examples/docs/fr-FR/rate.md
index 57d6b1c4..82ffb10d 100644
--- a/examples/docs/fr-FR/rate.md
+++ b/examples/docs/fr-FR/rate.md
@@ -4,7 +4,7 @@ Utilisé pour donner une note sur cinq étoiles.
 
 ### Usage
 
-:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`.
+:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
 
 ```html
 <div class="block">
@@ -15,7 +15,7 @@ Utilisé pour donner une note sur cinq étoiles.
   <span class="demonstration">Couleurs pour chaque niveau</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -24,7 +24,8 @@ Utilisé pour donner une note sur cinq étoiles.
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -61,12 +62,12 @@ Vous pouvez ajouter du texte à chaque score.
 
 Vous pouvez utiliser différentes icônes pour chaque
 
-:::demo Vous pouvez personnaliser les icônes de chaque niveau en utilisant `icon-classes`. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir l'icône des valeurs non-sélectionnées.
+:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir l'icône des valeurs non-sélectionnées.
 
 ```html
 <el-rate
   v-model="value"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -75,9 +76,10 @@ Vous pouvez utiliser différentes icônes pour chaque
   export default {
     data() {
       return {
-        value: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
-    }
+  }
   }
 </script>
 ```
@@ -120,10 +122,10 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
 | allow-half | Si les demi-étoiles sont autorisées. | boolean | — | false |
 | low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 |
 | high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
-| colors | Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau. | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | Couleur des icônes non-sélectionnées. | string | — | #C6D1DE |
 | disabled-void-color | Couleur des icônes non-sélectionnées en lecture seule. | string | — | #EFF2F7 |
-| icon-classes | Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau. | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | Classe des icônes non-sélectionnées. | string | — | el-icon-star-off |
 | disabled-void-icon-class | Classe des icônes non-sélectionnées en lecture seule. | string | — | el-icon-star-on |
 | show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index 2298613a..471459da 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -4,7 +4,7 @@
 
 ### 基础用法
 
-:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
+:::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。
 ```html
 <div class="block">
   <span class="demonstration">默认不区分颜色</span>
@@ -14,7 +14,7 @@
   <span class="demonstration">区分颜色</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -23,7 +23,8 @@
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -58,11 +59,11 @@
 
 当有多层评价时，可以用不同类型的 icon 区分评分层级
 
-:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
+:::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。
 ```html
 <el-rate
   v-model="value"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -71,7 +72,8 @@
   export default {
     data() {
       return {
-        value: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -114,10 +116,10 @@
 | allow-half | 是否允许半选 | boolean | — | false |
 | low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
 | high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
-| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
 | disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
-| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
 | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
 | show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue
index 3845e7aa..b70ec86e 100644
--- a/packages/rate/src/main.vue
+++ b/packages/rate/src/main.vue
@@ -34,6 +34,7 @@
 
 <script>
   import { hasClass } from 'element-ui/src/utils/dom';
+  import { isObject } from 'element-ui/src/utils/types';
   import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
@@ -73,7 +74,7 @@
         default: 5
       },
       colors: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
         }
@@ -87,7 +88,7 @@
         default: '#EFF2F7'
       },
       iconClasses: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
         }
@@ -162,12 +163,21 @@
         return this.value * 100 - Math.floor(this.value) * 100;
       },
 
+      classMap() {
+        return Array.isArray(this.iconClasses)
+          ? {
+            [this.lowThreshold]: this.iconClasses[0],
+            [this.highThreshold]: { value: this.iconClasses[1], excluded: true },
+            [this.max]: this.iconClasses[2]
+          } : this.iconClasses;
+      },
+
       decimalIconClass() {
         return this.getValueFromMap(this.value, this.classMap);
       },
 
       voidClass() {
-        return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
+        return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
       },
 
       activeClass() {
@@ -175,13 +185,12 @@
       },
 
       colorMap() {
-        return {
-          lowColor: this.colors[0],
-          mediumColor: this.colors[1],
-          highColor: this.colors[2],
-          voidColor: this.voidColor,
-          disabledVoidColor: this.disabledVoidColor
-        };
+        return Array.isArray(this.colors)
+          ? {
+            [this.lowThreshold]: this.colors[0],
+            [this.highThreshold]: { value: this.colors[1], excluded: true },
+            [this.max]: this.colors[2]
+          } : this.colors;
       },
 
       activeColor() {
@@ -204,16 +213,6 @@
         return result;
       },
 
-      classMap() {
-        return {
-          lowClass: this.iconClasses[0],
-          mediumClass: this.iconClasses[1],
-          highClass: this.iconClasses[2],
-          voidClass: this.voidIconClass,
-          disabledVoidClass: this.disabledVoidIconClass
-        };
-      },
-
       rateDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       }
@@ -236,15 +235,15 @@
       },
 
       getValueFromMap(value, map) {
-        let result = '';
-        if (value <= this.lowThreshold) {
-          result = map.lowColor || map.lowClass;
-        } else if (value >= this.highThreshold) {
-          result = map.highColor || map.highClass;
-        } else {
-          result = map.mediumColor || map.mediumClass;
-        }
-        return result;
+        const matchedKeys = Object.keys(map)
+          .filter(key => {
+            const val = map[key];
+            const excluded = isObject(val) ? val.excluded : false;
+            return excluded ? value < key : value <= key;
+          })
+          .sort((a, b) => a - b);
+        const matchedValue = map[matchedKeys[0]];
+        return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
       },
 
       showDecimalIcon(item) {
@@ -258,7 +257,7 @@
       },
 
       getIconStyle(item) {
-        const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
         return {
           color: item <= this.currentValue ? this.activeColor : voidColor
         };
diff --git a/src/utils/types.js b/src/utils/types.js
new file mode 100644
index 00000000..82877334
--- /dev/null
+++ b/src/utils/types.js
@@ -0,0 +1,3 @@
+export function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
diff --git a/test/unit/specs/rate.spec.js b/test/unit/specs/rate.spec.js
index 70eedf37..48a27e89 100644
--- a/test/unit/specs/rate.spec.js
+++ b/test/unit/specs/rate.spec.js
@@ -205,4 +205,25 @@ describe('Rate', () => {
     rate.resetCurrentValue();
     expect(vm.value).to.equal(0.5);
   });
+
+  it('custom icon classes by passing object', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-rate
+            v-model="value"
+            :icon-classes="{ 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }"></el-rate>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 4
+        };
+      }
+    }, true);
+    const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[3].querySelector('.el-rate__icon');
+    expect(thirdIcon.className).to.include('icon-rate-face-3');
+  });
+
 });
diff --git a/types/rate.d.ts b/types/rate.d.ts
index 9fe80a25..ca655f59 100644
--- a/types/rate.d.ts
+++ b/types/rate.d.ts
@@ -1,5 +1,17 @@
 import { ElementUIComponent } from './component'
 
+interface Option {
+  value: string,
+  excluded?: boolean
+}
+
+interface Options {
+  [threshold: number]: string | Option
+}
+
+export type RateColors = Options
+export type RateIconClasses = Options
+
 /** Rate Component */
 export declare class ElRate extends ElementUIComponent {
   /** Max rating score */
@@ -17,8 +29,8 @@ export declare class ElRate extends ElementUIComponent {
   /** Threshold value between medium and high level. The value itself will be included in high level */
   highThreshold: number
 
-  /** Color array for icons. It should have 3 elements, each of which corresponds with a score level */
-  colors: string[]
+  /** Colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color */
+  colors: string[] | RateColors
 
   /** Color of unselected icons */
   voidColor: string
@@ -26,8 +38,8 @@ export declare class ElRate extends ElementUIComponent {
   /** Color of unselected read-only icons */
   disabledVoidColor: string
 
-  /** Array of class names of icons. It should have 3 elements, each of which corresponds with a score level */
-  iconClasses: string[]
+  /** Class names of icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding class name */
+  iconClasses: string[] | RateIconClasses
 
   /** Class name of unselected icons */
   voidIconClass: string