Skip to content

E
Element
Commit c34ec3f1 authored by Simona's avatar Simona Committed by hetech
Browse files
Options

Rate: add custom colors and icon-classes by passing a object (#15051)

parent ec0295f5
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 68 deletions
examples/demo-styles/rate.scss
View file @ c34ec3f1
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
text-align: center; text-align: center;
border-right: solid 1px #eff2f6; border-right: solid 1px #eff2f6;
display: inline-block; display: inline-block;
width: 50%; width: 49%;
box-sizing: border-box; box-sizing: border-box;
&:last-child { &:last-child {
border-right: none; border-right: none;
......
examples/docs/en-US/rate.md
View file @ c34ec3f1
...@@ -4,7 +4,7 @@ Used for rating ...@@ -4,7 +4,7 @@ Used for rating
### Basic usage ### 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 ```html
<div class="block"> <div class="block">
...@@ -15,7 +15,7 @@ Used for rating ...@@ -15,7 +15,7 @@ Used for rating
<span class="demonstration">Color for different levels</span> <span class="demonstration">Color for different levels</span>
<el-rate <el-rate
v-model="value2" v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="colors">
</el-rate> </el-rate>
</div> </div>
...@@ -24,7 +24,8 @@ Used for rating ...@@ -24,7 +24,8 @@ Used for rating
data() { data() {
return { return {
value1: null, 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 ...@@ -61,12 +62,12 @@ Using text to indicate rating score
You can use different icons to distinguish different rate components. 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 ```html
<el-rate <el-rate
v-model="value" 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" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate> </el-rate>
...@@ -75,7 +76,8 @@ You can use different icons to distinguish different rate components. ...@@ -75,7 +76,8 @@ You can use different icons to distinguish different rate components.
export default { export default {
data() { data() {
return { 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. ...@@ -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 | | 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 | | 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 | | 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 | | void-color | color of unselected icons | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 | | 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 | | 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 | | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
| show-text | whether to display texts | boolean | — | false | | show-text | whether to display texts | boolean | — | false |
......
examples/docs/es/rate.md
View file @ c34ec3f1
...@@ -4,7 +4,7 @@ Usado para la calificación ...@@ -4,7 +4,7 @@ Usado para la calificación
### Uso básico ### 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 ```html
...@@ -16,7 +16,7 @@ Usado para la calificación ...@@ -16,7 +16,7 @@ Usado para la calificación
<span class="demonstration">Color for different levels</span> <span class="demonstration">Color for different levels</span>
<el-rate <el-rate
v-model="value2" v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="colors">
</el-rate> </el-rate>
</div> </div>
...@@ -25,7 +25,8 @@ Usado para la calificación ...@@ -25,7 +25,8 @@ Usado para la calificación
data() { data() {
return { return {
value1: null, 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 ...@@ -62,12 +63,12 @@ Usa texto para indicar la puntuación
Puede utilizar iconos para diferenciar cada componente. 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 ```html
<el-rate <el-rate
v-model="value" 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" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate> </el-rate>
...@@ -76,7 +77,8 @@ Puede utilizar iconos para diferenciar cada componente. ...@@ -76,7 +77,8 @@ Puede utilizar iconos para diferenciar cada componente.
export default { export default {
data() { data() {
return { 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 ...@@ -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 | | 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 | | 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 | | 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 | | void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 | | 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 | | 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 | | 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 | | show-text | muestra el texto | boolean | — | false |
......
examples/docs/fr-FR/rate.md
View file @ c34ec3f1
...@@ -4,7 +4,7 @@ Utilisé pour donner une note sur cinq étoiles. ...@@ -4,7 +4,7 @@ Utilisé pour donner une note sur cinq étoiles.
### Usage ### 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 ```html
<div class="block"> <div class="block">
...@@ -15,7 +15,7 @@ Utilisé pour donner une note sur cinq étoiles. ...@@ -15,7 +15,7 @@ Utilisé pour donner une note sur cinq étoiles.
<span class="demonstration">Couleurs pour chaque niveau</span> <span class="demonstration">Couleurs pour chaque niveau</span>
<el-rate <el-rate
v-model="value2" v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="colors">
</el-rate> </el-rate>
</div> </div>
...@@ -24,7 +24,8 @@ Utilisé pour donner une note sur cinq étoiles. ...@@ -24,7 +24,8 @@ Utilisé pour donner une note sur cinq étoiles.
data() { data() {
return { return {
value1: null, 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. ...@@ -61,12 +62,12 @@ Vous pouvez ajouter du texte à chaque score.
Vous pouvez utiliser différentes icônes pour chaque 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 ```html
<el-rate <el-rate
v-model="value" 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" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate> </el-rate>
...@@ -75,9 +76,10 @@ Vous pouvez utiliser différentes icônes pour chaque ...@@ -75,9 +76,10 @@ Vous pouvez utiliser différentes icônes pour chaque
export default { export default {
data() { data() {
return { 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> </script>
``` ```
...@@ -120,10 +122,10 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées. ...@@ -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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
......
examples/docs/zh-CN/rate.md
View file @ c34ec3f1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
### 基础用法 ### 基础用法
:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。 :::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">默认不区分颜色</span> <span class="demonstration">默认不区分颜色</span>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<span class="demonstration">区分颜色</span> <span class="demonstration">区分颜色</span>
<el-rate <el-rate
v-model="value2" v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="colors">
</el-rate> </el-rate>
</div> </div>
...@@ -23,7 +23,8 @@ ...@@ -23,7 +23,8 @@
data() { data() {
return { return {
value1: null, value1: null,
value2: null value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
} }
} }
} }
...@@ -58,11 +59,11 @@ ...@@ -58,11 +59,11 @@
当有多层评价时，可以用不同类型的 icon 区分评分层级 当有多层评价时，可以用不同类型的 icon 区分评分层级
:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。 :::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。
```html ```html
<el-rate <el-rate
v-model="value" 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" void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"> :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate> </el-rate>
...@@ -71,7 +72,8 @@ ...@@ -71,7 +72,8 @@
export default { export default {
data() { data() {
return { 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 @@ ...@@ -114,10 +116,10 @@
| allow-half | 是否允许半选 | boolean | — | false | | allow-half | 是否允许半选 | boolean | — | false |
| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 | | low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 | | 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 | | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
| disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 | | 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 | | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on | | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false | | show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
......
packages/rate/src/main.vue
View file @ c34ec3f1
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
<script> <script>
import { hasClass } from 'element-ui/src/utils/dom'; import { hasClass } from 'element-ui/src/utils/dom';
import { isObject } from 'element-ui/src/utils/types';
import Migrating from 'element-ui/src/mixins/migrating'; import Migrating from 'element-ui/src/mixins/migrating';
export default { export default {
...@@ -73,7 +74,7 @@ ...@@ -73,7 +74,7 @@
default: 5 default: 5
}, },
colors: { colors: {
type: Array, type: [Array, Object],
default() { default() {
return ['#F7BA2A', '#F7BA2A', '#F7BA2A']; return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
} }
...@@ -87,7 +88,7 @@ ...@@ -87,7 +88,7 @@
default: '#EFF2F7' default: '#EFF2F7'
}, },
iconClasses: { iconClasses: {
type: Array, type: [Array, Object],
default() { default() {
return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']; return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
} }
...@@ -162,12 +163,21 @@ ...@@ -162,12 +163,21 @@
return this.value * 100 - Math.floor(this.value) * 100; 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() { decimalIconClass() {
return this.getValueFromMap(this.value, this.classMap); return this.getValueFromMap(this.value, this.classMap);
}, },
voidClass() { voidClass() {
return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass; return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
}, },
activeClass() { activeClass() {
...@@ -175,13 +185,12 @@ ...@@ -175,13 +185,12 @@
}, },
colorMap() { colorMap() {
return { return Array.isArray(this.colors)
lowColor: this.colors[0], ? {
mediumColor: this.colors[1], [this.lowThreshold]: this.colors[0],
highColor: this.colors[2], [this.highThreshold]: { value: this.colors[1], excluded: true },
voidColor: this.voidColor, [this.max]: this.colors[2]
disabledVoidColor: this.disabledVoidColor } : this.colors;
};
}, },
activeColor() { activeColor() {
...@@ -204,16 +213,6 @@ ...@@ -204,16 +213,6 @@
return result; return result;
}, },
classMap() {
return {
lowClass: this.iconClasses[0],
mediumClass: this.iconClasses[1],
highClass: this.iconClasses[2],
voidClass: this.voidIconClass,
disabledVoidClass: this.disabledVoidIconClass
};
},
rateDisabled() { rateDisabled() {
return this.disabled || (this.elForm || {}).disabled; return this.disabled || (this.elForm || {}).disabled;
} }
...@@ -236,15 +235,15 @@ ...@@ -236,15 +235,15 @@
}, },
getValueFromMap(value, map) { getValueFromMap(value, map) {
let result = ''; const matchedKeys = Object.keys(map)
if (value <= this.lowThreshold) { .filter(key => {
result = map.lowColor || map.lowClass; const val = map[key];
} else if (value >= this.highThreshold) { const excluded = isObject(val) ? val.excluded : false;
result = map.highColor || map.highClass; return excluded ? value < key : value <= key;
} else { })
result = map.mediumColor || map.mediumClass; .sort((a, b) => a - b);
} const matchedValue = map[matchedKeys[0]];
return result; return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
}, },
showDecimalIcon(item) { showDecimalIcon(item) {
...@@ -258,7 +257,7 @@ ...@@ -258,7 +257,7 @@
}, },
getIconStyle(item) { getIconStyle(item) {
const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor; const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
return { return {
color: item <= this.currentValue ? this.activeColor : voidColor color: item <= this.currentValue ? this.activeColor : voidColor
}; };
......
src/utils/types.js 0 → 100644
View file @ c34ec3f1
export function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
test/unit/specs/rate.spec.js
View file @ c34ec3f1
...@@ -205,4 +205,25 @@ describe('Rate', () => { ...@@ -205,4 +205,25 @@ describe('Rate', () => {
rate.resetCurrentValue(); rate.resetCurrentValue();
expect(vm.value).to.equal(0.5); 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');
});
}); });
types/rate.d.ts
View file @ c34ec3f1
import { ElementUIComponent } from './component' 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 */ /** Rate Component */
export declare class ElRate extends ElementUIComponent { export declare class ElRate extends ElementUIComponent {
/** Max rating score */ /** Max rating score */
...@@ -17,8 +29,8 @@ export declare class ElRate extends ElementUIComponent { ...@@ -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 */ /** Threshold value between medium and high level. The value itself will be included in high level */
highThreshold: number highThreshold: number
/** Color array for icons. It should have 3 elements, each of which corresponds with a score level */ /** 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[] colors: string[] | RateColors
/** Color of unselected icons */ /** Color of unselected icons */
voidColor: string voidColor: string
...@@ -26,8 +38,8 @@ export declare class ElRate extends ElementUIComponent { ...@@ -26,8 +38,8 @@ export declare class ElRate extends ElementUIComponent {
/** Color of unselected read-only icons */ /** Color of unselected read-only icons */
disabledVoidColor: string disabledVoidColor: string
/** Array of class names of icons. It should have 3 elements, each of which corresponds with a score level */ /** 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[] iconClasses: string[] | RateIconClasses
/** Class name of unselected icons */ /** Class name of unselected icons */
voidIconClass: string voidIconClass: string
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment