Uma Boa Avaliação para o Pedido

Introdução

Neste projeto, você aprenderá como criar um componente de avaliação multidimensional usando Vue.js e a biblioteca Element-UI. O componente de avaliação permitirá que os usuários avaliem diferentes aspectos de um pedido de comida para viagem, como a velocidade da entrega, o sabor da comida e a qualidade da embalagem.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como criar um componente Vue.js personalizado chamado my-rate.vue para lidar com a funcionalidade de avaliação multidimensional.
• Como usar o componente el-rate da biblioteca Element-UI para implementar as dimensões de avaliação individuais.
• Como emitir um evento change do componente my-rate para notificar o componente pai quando as avaliações são atualizadas.
• Como personalizar o estilo e o layout do componente de avaliação para corresponder aos requisitos de design.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um componente Vue.js reutilizável com funcionalidade personalizada.
• Usar a biblioteca Element-UI para construir componentes de interface do usuário (UI) complexos.
• Gerenciar e comunicar dados entre componentes pai e filho em uma aplicação Vue.js.
• Estilizar e criar o layout de componentes Vue.js usando CSS.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── 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

Dentre eles:

• index.html é a página principal.
• A pasta element-ui-2.6.2 contém os arquivos de script, arquivos de estilo e fontes relacionados à biblioteca element-ui.
• A pasta js contém os arquivos relacionados às bibliotecas vue e http-vue-loader.
• my-rate.vue é o arquivo do componente de pontuação encapsulado.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Completar o Componente My-Rate

Nesta etapa, você completará o componente my-rate.vue para implementar a funcionalidade de avaliação multidimensional.

1. Abra o arquivo my-rate.vue na pasta do projeto.
2. Na seção template, adicione a estrutura HTML para o componente de avaliação:

<div class="block">
  <span class="demonstration">Por favor, avalie o pedido: </span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Completando a propriedade el-rate -->
      Velocidade da entrega:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completando a propriedade el-rate -->
      Sabores do pedido:
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completando a propriedade el-rate -->
      Embalagem do pedido:<el-rate
        v-model="pack"
        show-score
        @change="changeHandler"
      ></el-rate>
    </li>
  </ul>
</div>

Esta estrutura inclui três componentes el-rate, um para cada dimensão de avaliação: velocidade, sabor e embalagem.

3. Na seção <script>, adicione o 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>

A função data retorna um objeto com três propriedades: speed, flavor e pack, que armazenam os valores atuais de avaliação para cada dimensão.

O método changeHandler é chamado quando a avaliação de qualquer dimensão muda. Ele verifica se todas as três avaliações foram definidas e, se sim, emite um evento change com um objeto contendo os valores de avaliação atualizados.

4. Salve o arquivo my-rate.vue.
5. Volte para o navegador e atualize a página. A interface completa é mostrada na figura:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.