6.6 KiB
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
. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
<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="colors">
</el-rate>
</div>
<script>
export default {
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</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
.
<el-rate
v-model="value"
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text>
</el-rate>
<script>
export default {
data() {
return {
value: null
}
}
}
</script>
:::
Más iconos
Puede utilizar iconos para diferenciar cada componente.
:::demo Puede personalizar los iconos pasando icon-classes
un array con tres elementos o un objeto cuya clave es el umbral entre dos niveles y cuyo valor es la clase de icono correspondiente. En este ejemplo también usamos void-icon-class
para asignar un icono si no está seleccionado.
<el-rate
v-model="value"
:icon-classes="iconClasses"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
<script>
export default {
data() {
return {
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>
:::
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.
<el-rate
v-model="value"
disabled
show-score
text-color="#ff9900"
score-template="{value} points">
</el-rate>
<script>
export default {
data() {
return {
value: 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 | 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 | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | 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 |
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 |