vue饿了么学习-第十一篇（弹出层样式）

1.先设置一个弹出层样式，在header.vue的m-header下添加一个detail 板块，如下

<div class="background">
  <img :src="seller.avatar" width="100%" height="100%"/>
</div>
<div class="detail" v-show="detailShow"></div>

2.设置好 .detail 的样式，如下

position: fixed
z-index: 100
top: 0
width: 100%
height: 100%
overflow: auto
background: rgba(7,17,27,0.8)

3.点击个数或者公告的时候，弹出这个层，则需要用v-show 绑定到对应的模块上去，

v-show="detailShow"

4.控制 v-show 模块，设置一个data为布尔型的数据  detailData ，如下

data() {
  return {
    detailShow: false
  }
},

5.当点击对应模块的时候，就要展示弹出层，点击的时候，必须让 detailData 变为true，则需要在mothods中添加一个方法，并把这个方法绑定到对应的模块中去 @click = “xx?

methods: {
  showData() {
      this.detailShow = true
  }
}

6.有问题请留言讨论！