目录
介绍
准备
目标
效果
规定
思路
解答参考
介绍
外卖是现代生活中必备的一环。收到外卖后，各大平台软件常常会邀请用户在口味，配送速度等多个方面给与评分。在 element-ui 组件中，已经有相应的 Rate 组件，但是已有组件只能对单一维度进行评分，在外卖评分这种场景中，样式基本上是固定的，功能也基本一样。若每写一个页面都要去复制一份类似代码，就会产生大量重复的代码，既不利于后期的维护，代码也不够简洁。为此需要前端工程师对 element-ui 的原 Rate 组件进行二次封装。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── 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是完成后的效果图。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/03.zip && unzip 03.zip && rm 03.zip在浏览器中预览 index.html 页面，显示如下所示：
目标
请在 my-rate.vue 文件中补充代码，具体要求如下：
-
my-rate.vue组件能够对不同的维度进行评分。 -
my-rate.vue组件对外抛出change事件，在三项评分均完成后，触发change事件，change事件包含一个参数，用于传递改变后的分数值，其类型是对象，包含以下属性：
效果
完成后的效果见 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 名、图片名等，以免造成无法判题通过。自己先做一下吧：传送门
思路
这道题目主要是考察Vue以及elementUI的知识点。需要学会通过提供的组件API来实现相应的功能。同时也需要会使用Vue进行自定义事件的绑定来进行数据的传递。若对组件间如何实现通信感兴趣的小伙伴可以这篇文章！
解答参考
<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="flavour" show-score @change="changeHandler"></el-rate>
</li>
<li>
<!-- TODO 补全 el-rate 属性 -->
外卖包装：<el-rate v-model="pack" show-score @change="changeHandler"></el-rate>
</li>
</ul>对每一个el-rate标签使用v-model来进行绑定，获取它对应的数值。同时加上show-score属性让其显示当前分数。并未每一个标签绑定change事件，当数值改变时触发。
methods:{
changeHandler(){
if(this.speed && this.flavour && this.pack){
const rate = {
speed: this.speed, // 送餐速度
flavour: this.flavour, // 外卖口味
pack: this.pack, // 外卖包装
}
this.$emit("change",rate)
}
}
}当有分值改变时，触发changeHandler函数，并判断三个属性是否都有对应的值，若有，则使用$emit对外抛出 change 事件，并传入对应的对象数值。
文件整体代码：
<template>
<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="flavour" 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>
</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:{
changeHandler(){
if(this.speed && this.flavour && this.pack){
const rate = {
speed: this.speed, // 送餐速度
flavour: this.flavour, // 外卖口味
pack: this.pack, // 外卖包装
}
this.$emit("change",rate)
}
}
}
};
</script>
好啦，本文就到这里了，这道题比较简单就不过多讲解了！
