Хороший отзыв о доставке еды

Введение

В этом проекте вы научитесь создавать многомерный компонент оценки с использованием Vue.js и библиотеки Element-UI. Компонент оценки позволит пользователям оценивать разные аспекты外卖 заказа, такие как скорость доставки, вкус еды и качество упаковки.

👀 Превью

🎯 Задачи

В этом проекте вы научитесь:

• Создавать пользовательский компонент Vue.js под названием my-rate.vue для обработки многомерной функциональности оценки.
• Использовать компонент el-rate из библиотеки Element-UI для реализации отдельных размеров оценки.
• Генерировать событие change из компонента my-rate, чтобы уведомить родительский компонент при обновлении оценок.
• Настраивать стилизацию и макет компонента оценки, чтобы соответствовать требованиям дизайна.

🏆 Достижения

После завершения этого проекта вы сможете:

• Создавать повторно используемый компонент Vue.js с пользовательской функциональностью.
• Использовать библиотеку Element-UI для построения сложных компонентов интерфейса.
• Управлять и обмениваться данными между родительскими и дочерними компонентами в приложении Vue.js.
• Стилизовать и разрабатывать макет компонентов Vue.js с использованием CSS.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

В них:

• index.html - главная страница.
• Папка element-ui-2.6.2 содержит скриптовые файлы, стили и шрифты, связанные с библиотекой element-ui.
• Папка js содержит файлы, связанные с библиотеками vue и http-vue-loader.
• my-rate.vue - файл инкапсулированного компонента оценки.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Завершить компонент My-Rate

В этом шаге вы завершите компонент my-rate.vue, чтобы реализовать многомерную функциональность оценки.

1. Откройте файл my-rate.vue в папке проекта.
2. В разделе template добавьте HTML-структуру для компонента оценки:

<div class="block">
  <span class="demonstration">Пожалуйста, оцените外卖：</span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Завершение свойства el-rate -->
      Скорость доставки:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Завершение свойства el-rate -->
      Вкусы外卖：
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Завершение свойства el-rate -->
      Упаковка外卖：
      <el-rate v-model="pack" show-score @change="changeHandler"></el-rate>
    </li>
  </ul>
</div>

Эта структура включает три компонента el-rate, по одному для каждого измерения оценки: скорость, вкус и упаковка.

3. В разделе <script> добавьте метод 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>

Функция data возвращает объект с тремя свойствами: speed, flavor и pack, которые хранят текущие значения оценок для каждого измерения.

Метод changeHandler вызывается при изменении оценки любого измерения. Он проверяет, установлены ли все три оценки, и если да, то генерирует событие change с объектом, содержащим обновленные значения оценок.

4. Сохраните файл my-rate.vue.
5. Вернитесь в браузер и обновите страницу. Завершенный интерфейс выглядит, как показано на рисунке:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.