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

最新推荐文章于 2024-06-05 10:01:11 发布

奔跑的蜗牛FelixChioa

最新推荐文章于 2024-06-05 10:01:11 发布

阅读量687

点赞数

分类专栏：前端开发文章标签：前端

本文链接：https://blog.csdn.net/FeilxChioa/article/details/105251442

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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页面也是正常展示的。