p209-底部工具栏的封装

一、底部工具栏，点击加入购物车

1.1 封装一个底部工具栏

views/detail/childComps/DetailBottomBar.vue，引入到Detail.vue里面，

这样可以基本显示出来，Detail.vue的class="content" 没有加z-index,所以这里样式不用加z-index,

其他样式直接赋值，后面再说吧。。。

问题一：这里图片文字描述被挡住了，滚动不上去

解决一：

在Detail.vue的.content样式改成 height: calc(100% - 44px - 49px);

但是出现了这个问题

再把DetailBottomBar.vue的样式.bottom-bar的bottom:49px去掉

 二、BackTop的混入封装（右下做一个回到顶部的小按钮）

混入mixin

<back-top @click.native="backTop"  v-show="isShowBackTop"></back-top>
import {itemListenerMixin,backTopMixin} from "common/mixin";
mixins: [itemListenerMixin,backTopMixin],

 Home.vue里也可以这样用混入抽取，我们省略

三、将商品添加到购物车中

3.1  监听购物车的点击

<div class="cart" @click="addToCart">加入购物车</div>

3.2  点击后要把商品加入到购物车，即把点击事件发送到Detail.vue

methods: {
  addToCart(event) {
    this.$emit('addToCart')
  }
}

3.3 父组件监听到子组件传来的事件

<detail-bottom-bar @addToCart="addToCart"/>