【Vue项目实战】vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件 - 【速看】面试教你有话可说

本章主要实现：header组件，header-detail浮层组件，star评分显示组件，tab切换组件

小掘友的话：本文充斥着很口语化的字样，在于友友希望做完一个项目之后可以很好的表达出来，面试被提问到的时候也有话可说、能够表达清除。

---

速看 1. v-header组件 主要由内容区和公告区组成，核心要点在于公告栏要有不折行+显示缩略的效果。实现方法为设置属性：white-space: nowrap；overflow: hidden；text-overflow: ellipsis。还有就是对于整个header部分显示半透明模糊效果的图片，背景整个位于这部分的底部，把图片position：absolute，并设置index：-1，宽高撑满header区块。模糊效果使用filter，并且设置header组件有一个灰色半透明背景rgba。

2. header-datail浮层组件 整个组件效果是全屏效果，下部还有个固定的关闭按钮，由于本身高度可能超过手机高度，因此会滚，不能使用position fixed布局，如果内容比较长，则会盖住X。这里使用到了经典的css sticky footers 布局。

尝试过把head-detail组件放在header组件中，为了防止父元素的嵌套样式效果影响组件，更好的方法是把该部分被创建为cube-ui中的create-API组件。（cube-ui提供了一个很好的API就是creat-api模块，让我们把一个模块从声明式的写（）,而变为API调用（creatAPI(vue,component)）即当一个组件执行createAPI之后，我们可以在组件内部通过$ceate(Star)来调用组件，并且可以动态挂载到body下面。因此就很适合这种全屏弹窗组件动态挂载到body下，而移除时可以从body下卸载。）在调用时，使用驼峰形式引入组件，传入props，创建之后通过组件调用show()方法控制显示，使用hide()方法控制浮层关闭。

由于show（）和hide（）方法在后面其他部分有类似的逻辑处理，因此抽离出mixin。对于过渡动画，使用定义name=”fade”,然后写动画。其中的—text----是flex布局由三个部分组成：line text line

3. star组件 显示是由三组图片组成（全星，半星，空），使用props接收size和score两个参数。计算属性依赖size实现三种大小的样式展现，通过计算score在数组中放入响应的星星状态，使用v-for遍历数组显示评分。

4. tab组件 使用cube-ui提供的tab-bar来实现页面切换。为了实现点击tab做页面切换，写入change事件（cube-ui的slide的）在slide页面切换时触发，并且派发当前页面的索引值，从而实现页面切换。为了优化体验，希望tab滑动时下划线可以跟着页面实现流畅滚动，可以根据tab占比和slide占比相同实时计算tab滚动位置。

由于开始tab标签是写死的，个数也是固定的，因此希望这个tab可以接收一个数组，包含tab个数，tab名称，对应的组件，而tab只是用来维护这些内容，因此v-for遍历，使用动态提供组件。并在app.vue中添加默认的tab数组。

---

本项目分享的速看部分是我被面试问道的时候（问项目学到了什么、主要完成了什么、有什么收获）一般会表述的，希望博客可以帮助到大家，当然如果你融会贯通，其实也可以拿黑体字当成你的项目讲述哦。

---

一、header组件

1. 概括

v-header组件的主要由内容区和公告区组成，核心要点在于公告栏要有不折行+显示缩略的效果。实现方法为设置属性：white-space: nowrap；overflow: hidden；text-overflow: ellipsis。还有就是对于整个header部分显示半透明模糊效果的图片，背景整个位于这部分的底部，把图片position：absolute，并设置index：-1，宽高撑满header区块。模糊效果使用filter，并且设置header组件有一个灰色半透明背景rgba。

2. 布局

布局主要包含两个区块：内容区（图象+名称描述等+浮层），公告相关

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lQzgqwRu-1652320661300)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d04bd272fab4c5b95de74ae302d22ef~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

 <div class="content-wrapper">
      <div class="avatar"></div>
      <div class="content">
        <div class="title"></div>
        <div class="description"></div>
        <div class="support"></div>
      </div>
      <div class="support-count"></div>
    </div>
    <div class="bulletin-wrapper"></div>
    <div class="background"></div>
</div> 

3. 具体实现

（1）组件传值

首先需要在props接收seller对象，并且需要设置默认为空

 seller: {
        type: Object,
        default() {
          return {}
        }
      }
    }, 

（2）商家图片部分

直接添加图片 <div class="avatar"><img width="64" height="64" :src="seller.avatar"></div>

（3）右侧content内容

动态绑定seller.name 、seller.description 、seller.deliveryTime

Support表示下面的满减活动，包含icon和text，并且supports是一个数组，使用v-if

 <div class="title">
          <span class="brand"></span>
          <span class="name">