vue高仿饿了么项目学习笔记之二:头部header组件的实现

1. Vue-resource应用

在父组件APP.vue的钩子函数created使用vue-resource来ajax请求/api/seller，将数据赋值给vue实例的seller对象，并传值给子组件header渲染。

2.外部组件header组件

开始写header组件

声明props: ['seller']属性，将app.vue中ajax请求到的seller传值给header组件

<v-header :seller="seller"></v-header>

header分为内容区content-wrapper和公告区bulletin-wrapper上下两个部分。

内容区content-wrapper:

由头像avatar，内容content和优惠数量左中右三部分组成。其中优惠数量为绝对定位。

内容content:

由商家名称，运送描述和优惠活动上中下三部分组成。

其中优惠活动建了一个classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']数组，用来做后台数据和图片间的映射。

公告区bulletin-wrapper:

由图标，文本和剪头icon三部分横向组成

注意的地方:

vue-cli全局引入图标icon样式需在main.js中引入

import './common/stylus/icon.styl'

具体引入细节可参考文章

https://blog.csdn.net/qq_39083496/article/details/88586862#comments

3.给header组件添加背景

思路:设置一个绝对定位的div，背景使用seller.avatar.将图像用z-index:-1浮动起来，并将其设置模糊filter:blur(10px)。height和width分别设为100%撑满父容器header。父容器header的背景设为半透明background:rgba(7,17,27,0.5)，将背景层透出来。

4.写公告浮层页面(详情弹层页)

前置知识:css sticky footers布局

该布局大意就是将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。

使用该布局实现详情弹层页，思路:

<div v-show="detailShow" class="detail"><div class="detail-wrapper clearfix"><div class="detail-main"><p>{{seller.bulletin}}</p></div></div><div class="detail-close"><span class="icon-close"></span></div></div>

a.外面的detail层为fixed布局，高宽均为100%，如果超出内容显示区overflow设置为可滚动auto。
b.详情弹层页分为detail-wrapper(内容区)和detail-close(摆放关闭按钮)两个块
detail-wrapper高度要撑满整个视窗窗口 min-height: 100%，同时添加clearfix样式设置一个高度为0的伪类:after。
detail-close 为relative定位，margin一定要设为横向居中往上移（margin:-64px auto 0 auto），因为detail-wrapper已经撑满了视窗窗口。
c.放置内容区detail-main，注意padding-bottom一定要设为64px，这样可以留出位置给detail-close。

问题:
为什么要对:after和detail-close两个区clear:both,因为并没有元素浮动?
为什么要在detail-main后添加伪类:after?自己测试detail-wrapper设置为display:inline-block但没有添加:after页面也是正常展示的。

5.详情弹层页实现星级评分效果

引入vue概念:计算属性

因为星级评分在很多页面都有显示，所以将星级评分单独抽象为一个组件star.vue，接收外部传入参数size(星星尺寸)和score(评分），根据size实现星星显示大小，根据score转换为星星显示个数。

在header中将star组件引入，并作为自定义标签使用。

6.写优惠信息带两横线标题

优惠信息的容器采用flex布局

flex布局参考阮一峰写的资料

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

剩下的优惠信息采用v-for遍历显示

下面的商家公告布局同理采用flex

公告内容顺序显示很简单

涉及的知识点line-height和vertical-align

line-height：设置元素中行的高度

Html出现多行内容时，每一行都叫做一个line-box。line-box 的高度是由它所有子元素inline-box的高度计算得出的,具体来说就是从子元素的最高点到最低点的高度。

对于一个内联元素，它有两个高度：content-area（内容区高度）和vitual-area（实际高度），实际高度就是 line-height，这个高度用于计算 line-box 的高度。line-height 并非表示两个 baseline 之间的距离。

元素内容在line-height中居中显示。virtual-area 和 content-area 高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部，另一半会被加到底部。因此 content-area 总是处于 virtual-area 的中间。

vertical-align:设置元素内容的垂直对齐方式

vertical-align: top / bottom，表示与 line-box 的顶部或底部对齐

vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐

vertical-align: middle，把此元素放置在父元素的中部。