Una buena reseña para la comida para llevar

Introducción

En este proyecto, aprenderás a crear un componente de calificación multidimensional utilizando Vue.js y la biblioteca Element-UI. El componente de calificación permitirá a los usuarios calificar diferentes aspectos de una orden de comida para llevar, como la velocidad de entrega, el sabor de la comida y la calidad del empaquetado.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo crear un componente personalizado de Vue.js llamado my-rate.vue para manejar la funcionalidad de calificación multidimensional.
• Cómo utilizar el componente el-rate de la biblioteca Element-UI para implementar las dimensiones de calificación individuales.
• Cómo emitir un evento change desde el componente my-rate para notificar al componente padre cuando se actualizan las calificaciones.
• Cómo personalizar el estilo y el diseño del componente de calificación para que coincida con los requisitos de diseño.

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un componente reutilizable de Vue.js con funcionalidad personalizada.
• Utilizar la biblioteca Element-UI para construir componentes de interfaz de usuario complejos.
• Administrar y comunicar datos entre componentes padre e hijo en una aplicación de Vue.js.
• Estilizar y diseñar componentes de Vue.js utilizando CSS.

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── element-ui-2.6.2
│   ├── element-icons.ttf
│   ├── element-icons.woff
│   ├── element-ui.min.js
│   └── element-ui.style.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└──  my-rate.vue

Entre ellos:

• index.html es la página principal.
• La carpeta element-ui-2.6.2 contiene los archivos de script, archivos de estilo y fuentes relacionados con la biblioteca element-ui.
• La carpeta js contiene los archivos relacionados con las bibliotecas vue y http-vue-loader.
• my-rate.vue es el archivo del componente de puntuación encapsulado.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Completar el componente My-Rate

En este paso, completarás el componente my-rate.vue para implementar la funcionalidad de calificación multidimensional.

1. Abre el archivo my-rate.vue en la carpeta del proyecto.
2. En la sección template, agrega la estructura HTML para el componente de calificación:

<div class="block">
  <span class="demonstration"
    >Por favor, califique la comida para llevar:
  </span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Completar la propiedad el-rate -->
      Velocidad de entrega:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completar la propiedad el-rate -->
      Sabores de la comida para llevar:
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completar la propiedad el-rate -->
      Empaquetado de la comida para llevar:
      <el-rate v-model="pack" show-score @change="changeHandler"></el-rate>
    </li>
  </ul>
</div>

Esta estructura incluye tres componentes el-rate, uno para cada dimensión de calificación: velocidad, sabor y empaquetado.

3. En la sección <script>, agrega el método changeHandler:

<script>
module.exports = {
  data() {
    return {
      speed: 0,
      flavor: 0,
      pack: 0
    };
  },
  /* TODO */
  methods: {
    changeHandler() {
      if (this.speed && this.flavor && this.pack) {
        const rate = {
          speed: this.speed,
          flavor: this.flavor,
          pack: this.pack
        };
        this.$emit("change", rate);
      }
    }
  }
};
</script>

La función data devuelve un objeto con tres propiedades: speed, flavor y pack, que almacenan los valores de calificación actuales para cada dimensión.

El método changeHandler se llama cuando cambia la calificación de cualquier dimensión. Verifica si las tres calificaciones han sido establecidas, y si es así, emite un evento change con un objeto que contiene los valores de calificación actualizados.

4. Guarda el archivo my-rate.vue.
5. Vuelve al navegador y actualiza la página. La interfaz completada es como se muestra en la figura:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.