一份出色的外卖评价

简介

在这个项目中，你将学习如何使用Vue.js和Element-UI库创建一个多维评分组件。该评分组件将允许用户对一份外卖订单的不同方面进行评分，例如配送速度、食物口味和包装质量。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何创建一个名为 my-rate.vue 的自定义Vue.js组件来处理多维评分功能。
• 如何使用Element-UI库中的 el-rate 组件来实现各个评分维度。
• 如何从 my-rate 组件发出 change 事件，以便在评分更新时通知父组件。
• 如何自定义评分组件的样式和布局以符合设计要求。

🏆 成果

完成这个项目后，你将能够：

• 创建一个具有自定义功能的可复用Vue.js组件。
• 使用Element-UI库构建复杂的用户界面组件。
• 在Vue.js应用程序中管理父子组件之间的数据并进行通信。
• 使用CSS对Vue.js组件进行样式设置和布局。

Skills Graph

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── 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 是封装评分组件的文件。

点击WebIDE右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开 “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中练习更多实验来提升你的技能。