项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件

本文链接：https://blog.youkuaiyun.com/Sabrina_cc/article/details/106748107

说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！

上节回顾：项目总结：vue.js2.5饿了么APP（1）概述+项目准备

本章主要实现：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模块，让我们把一个模块从声明式的写（<star></star>）,而变为API调用（creatAPI(vue,component)）即当一个组件执行createAPI之后，我们可以在组件内部通过$ceate(Star)来调用组件，并且可以动态挂载到body下面。因此就很适合这种全屏弹窗组件动态挂载到body下，而移除时可以从body下卸载。）在调用时，使用驼峰形式引入组件，传入props，创建之后通过组件调用show()方法控制显示，使用hide()方法控制浮层关闭。

由于show（）和hide（）方法在后面其他部分有类似的逻辑处理，因此抽离出mixin。对于过渡动画，使用<transtion>定义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遍历，使用<component :is>动态提供组件。并在app.vue中添加默认的tab数组。

（5）公告区bulletin-wrapper

（6）背景图

二、Header-detail头部弹层组件

1. 概括

2. 布局

3. 实现

（1）Css sticky footer布局

（2）clear-fix

（3）---text---部分

（4）活动内容部分

（5）组件之间的引用--创建CreateAPI

一、header组件

1. 概括

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

2. 布局

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

<div class="header">
    <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对象，并且需要设置默认为空

props: {
      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="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{
  {seller.name}}</span>
        </div>
        <div class="description">
          {
  {seller.description}}/{
  {seller.deliveryTime}}分钟送达
        </div>
        <div v-if="seller.supports" class="support">
          <support-ico :size=1 :type="seller.supports[0].type"></support-ico>
          <span class="text">{
  {seller.supports[0].description}}</span>
        </div>
      </div>

（4）添加浮层入口

<div v-if="seller.supports" class="support-count">
        <span class="count">{
  {seller.supports.length}}个</span>
        <i class="icon-keyboard_arrow_right"></i>
</div>

（5）公告区bulletin-wrapper

三个部分：icon，文字，箭头（点击展开蒙层）如果内容超出区域会显示缩略（...）

<div class="bulletin-wrapper">
    <span class="bulletin-title"></span><span class="bulletin-text">{
  {seller.bulletin}}</span>
    <i class="icon-keyboard_arrow_right"></i>
 </div>

由于描述比较多，如果不写样式会把描述全部显示，不符合所需结果。不折行+显示缩略：