mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-04 21:27:52 +08:00
0706805226
* fix doc * update doc component * use codeopen to display demo * use codepen * fix image path * update
139 lines
5.9 KiB
Markdown
139 lines
5.9 KiB
Markdown
## Calificación
|
|
|
|
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`.
|
|
|
|
|
|
```html
|
|
<div class="block">
|
|
<span class="demonstration">Default</span>
|
|
<el-rate v-model="value1"></el-rate>
|
|
</div>
|
|
<div class="block">
|
|
<span class="demonstration">Color for different levels</span>
|
|
<el-rate
|
|
v-model="value2"
|
|
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
|
</el-rate>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: null,
|
|
value2: null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Con texto
|
|
|
|
Usa texto para indicar la puntuación
|
|
|
|
:::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
|
|
|
|
```html
|
|
<el-rate
|
|
v-model="value3"
|
|
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
|
show-text>
|
|
</el-rate>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value3: null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Más iconos
|
|
|
|
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.
|
|
|
|
```html
|
|
<el-rate
|
|
v-model="value4"
|
|
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
|
void-icon-class="icon-rate-face-off"
|
|
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
|
</el-rate>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value4: null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Solo lectura
|
|
|
|
La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.
|
|
|
|
:::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
|
|
|
|
```html
|
|
<el-rate
|
|
v-model="value5"
|
|
disabled
|
|
show-score
|
|
text-color="#ff9900"
|
|
score-template="{value} points">
|
|
</el-rate>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value5: 3.7
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Atributos
|
|
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|
|
| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
|
|
| value / v-model | valor enlazado | number | — | 0 |
|
|
| max | puntuación máxima | number | — | 5 |
|
|
| disabled | si la calificación es de solo lectura | 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 |
|
|
| 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'] |
|
|
| 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'] |
|
|
| 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 |
|
|
| show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false |
|
|
| text-color | color del texto | string | — | #1F2D3D |
|
|
| texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
|
| score-template | plantilla de puntuación | string | — | {value} |
|
|
|
|
### Eventos
|
|
| Nombre del evento | Descripción | Parámetros |
|
|
| ----------------- | ---------------------------------------- | ---------------------- |
|
|
| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |
|