element/examples/docs/es/rate.md
2019-05-07 04:56:23 +01:00

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