使用 Vue.js 创建多维评分组件

介绍

在这个项目中，你将学习如何使用 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 组件进行样式设置和布局。

设置项目结构

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

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

├── 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 组件以实现多维评分功能。

在项目文件夹中打开 my-rate.vue 文件。
在 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 组件，每个评分维度一个：速度、口味和包装。

在 <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 事件，并附带一个包含更新后评分值的对象。