外卖给好评

介绍

外卖是现代生活中必备的一环。收到外卖后，各大平台软件常常会邀请用户在口味，配送速度等多个方面给与评分。在 element-ui 组件中，已经有相应的 Rate 组件，但是已有组件只能对单一维度进行评分，在外卖评分这种场景中，样式基本上是固定的，功能也基本一样。若每写一个页面都要去复制一份类似代码，就会产生大量重复的代码，既不利于后期的维护，代码也不够简洁。为此需要前端工程师对 element-ui 的原 Rate 组件进行二次封装。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
├── 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
└── effect.gif

其中：

  • index.html 是主页面。
  • element-ui-2.6.2 文件夹中存放的是 element-ui 库相关的脚本文件、样式文件及字体。
  • js 文件夹中存放的是 vue 及 http-vue-loader 库相关文件。
  • my-rate.vue 是待封装的评分组件文件。
  • effect.gif 是完成后的效果图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/03.zip && unzip 03.zip && rm 03.zip

在浏览器中预览 index.html 页面，显示如下所示：

初始效果

目标

请在 my-rate.vue 文件中补充代码，具体要求如下：

  1. my-rate.vue 组件能够对不同的维度进行评分。

  2. my-rate.vue 组件对外抛出 change 事件，在三项评分均完成后，触发 change 事件，change 事件包含一个参数，用于传递改变后的分数值，其类型是对象，包含以下属性：

    1
    2
    3
    4
    5
    {
     speed: number;
     flavour: number;
     pack: number; 
    }

完成后的效果见 effect.gif （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。 完成效果

实现该功能所需的 el-rate 组件 api 如下：

参数 说明 类型 默认值
value/v-model 绑定值 number 0
show-score 是否显示当前分数，show-score 和 show-text 不能同时为真 boolean false
change(event 事件) 分值改变时触发，参数是改变后的分值 (changed: object) => void

规定

  • 请勿修改 my-rate.vue 文件外的任何内容。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

  • 完全实现题目目标得满分，否则得 0 分。

总通过次数: 825 | 总提交次数: 846 | 通过率: 97.5%

难度: 中等 标签: 蓝桥杯, 2023, 省赛, Web 前端, Vue.js, ElementUI

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<template>
  <div class="block">
    <span class="demonstration">请为外卖评分: </span>
    <ul class="rate-list">
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        送餐速度：<el-rate
          v-model="speed"
          show-score
          @change="isComplete"
        ></el-rate>
      </li>
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        外卖口味：<el-rate
          v-model="flavour"
          show-score
          @change="isComplete"
        ></el-rate>
      </li>
      <li>
        <!-- TODO 补全 el-rate 属性 -->
        外卖包装：<el-rate
          v-model="pack"
          show-score
          @change="isComplete"
        ></el-rate>
      </li>
    </ul>
  </div>
</template>
<style>
.block {
  border: 1px solid #c7c5c5;
  padding: 10px;
}
.rate-list {
  list-style: none;
  padding-inline-start: 20px;
  margin-block-start: 10px;
  margin-block-end: 10px;
}
.el-rate {
  display: inline-block;
}
</style>

<script>
module.exports = {
  data() {
    return {
      speed: 0, // 送餐速度
      flavour: 0, // 外卖口味
      pack: 0, // 外卖包装
    };
  },
  /* TODO: 考生需要完成以下内容 */
  methods: {
    isComplete() {
      if (this.speed && this.flavour && this.pack) {
        this.$emit('change', {
          speed: this.speed,
          flavour: this.flavour,
          pack: this.pack
        })
      }
    }
  }
};
</script>