javaScript蓝桥杯----外卖给好评

目录

  • 一、介绍
  • 二、准备
  • 三、⽬标
  • 四、代码
  • 五、完成


一、介绍

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

二、准备

开始答题前,需要先打开本题的项⽬代码⽂件夹,⽬录结构如下:

├── element-ui-2.6.2
│ ├── element-icons.ttf
│ ├── element-icons.woff
│ ├── element-ui.min.js
│ └── element-ui.style.min.css
├── index.html
├── js
│ ├── http-vue-loader.min.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 是完成后的效果图。

在浏览器中预览 index.html ⻚⾯,显示如下所示
javaScript蓝桥杯----外卖给好评_第1张图片

三、⽬标

请在 my-rate.vue ⽂件中补充代码,具体要求如下:

  1. my-rate.vue 组件能够对不同的维度进⾏评分。
  2. my-rate.vue 组件对外抛出 change 事件,在三项评分均完成后,触发 change 事件, change事件包含⼀个参数,⽤于传递改变后的分数值,其类型是对象,包含以下属性:
{
speed: number;
flavour: number;
pack: number;
}

最终效果可参考⽂件夹下⾯的 gif 图,图⽚名称为 effect.gif(提示:可以通过 VS Code 或者浏览器预览gif 图⽚)。

实现该功能所需的 el-rate 组件 api 如下:
javaScript蓝桥杯----外卖给好评_第2张图片

四、代码

index.html

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>外卖给好评title>
    <link rel="stylesheet" href="./element-ui-2.6.2/element-ui.style.min.css" />
    <style>
      body {
        padding: 20px;
      }
      .result {
        margin-top: 20px;
      }
    style>
  head>
  <body>
    <div id="app">
      <my-rate @change="onRateChange">my-rate>
      <div class="result">评分结果:{{JSON.stringify(rate)}}div>
    div>
    <script src="./js/vue.min.js">script>
    <script src="./js/http-vue-loader.min.js">script>
    <script src="./element-ui-2.6.2/element-ui.min.js">script>
    <script>
      Vue.use(httpVueLoader);
      const app = new Vue({
        el: "#app",
        components: {
          "my-rate": "url:./my-rate.vue",
        },
        data() {
          return {
            rate: {},
          };
        },
        methods: {
          onRateChange(rate) {
            this.rate = rate;
          },
        },
      });
    script>
  body>
html>

my-rare.vue

<template>
  <div class="block">
    <span class="demonstration">请为外卖评分: span>
    <ul class="rate-list">
      <li>
        
        送餐速度:<el-rate>el-rate>
      li>
      <li>
        
        外卖口味:<el-rate>el-rate>
      li>
      <li>
        
        外卖包装:<el-rate>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:待补充代码 */
};
script>

五、完成

<template>
  <div class="block">
    <span class="demonstration">请为外卖评分: span>
    <ul class="rate-list">
      <li>
        
        送餐速度:<el-rate @change="sendRate('speed')" show-score="true" v-model="speed">el-rate>
      li>
      <li>
        
        外卖口味:<el-rate @change="sendRate('flavour')" show-score="true" v-model="flavour">el-rate>
      li>
      <li>
        
        外卖包装:<el-rate @change="sendRate('pack')" show-score="true" v-model="pack">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, // 外卖包装
      obj: {},
    }
  },
  /* TODO:待补充代码 */
  methods: {
    sendRate(key) {
      this.obj[key] = this[key]
      const values = Object.keys(this.obj)
      if (values.length == 3) {
      //这里一定要将obj结构出来 不然不能实时更新
        // const copy ={...this.obj}  或者
        const copy = Object.assign({}, this.obj)
        this.$emit('change', copy)
      }
    },
  },
}
script>

你可能感兴趣的:(javaScript,javascript,蓝桥杯,vue.js)