vue饿了么学习-第十篇（header样式）

1.App.vue中路由请求到的seller数据，把它绑定到m-header头部组件中去，

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

2.打开header组件，用props属性去接收刚才传过来的值，

<script type="text/ecmascript-6">
  export default {
      //用props去接收从App.vue传入过来的seller数据
    props: {
      seller: {
        type: Object
      }
    },

（这里可以测试一下，methods下创建一个函数，并把这个函数挂在到m-header标签上，打印一下seller看看，有没有数据，如果有就代表数据传入成功）

3.写内容

<template>
  <div class="m-header">
    <div class="m-content">
      <div class="m-content-avatar">
        <img with="64" height="64" :src="seller.avatar">
      </div>
      <div class="m-content-cnt">
        <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">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
    </div>
    <div class="bulletin"></div>
  </div>
</template>

4.样式内容如下：

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/styles/mixin.styl"
  .m-header
    color: #fff
    background: #000
    height:300px
    div
      margin: 0px
      padding: 0px
      height:auto
    .m-content
      padding: 24px 12px 18px 24px
      font-size: 0
      .m-content-avatar
        display: inline-block
        vertical-align: top
        img
          border-radius: 2px
      .m-content-cnt
        display: inline-block
        margin-left:16px;
        .title
          margin:2px 0 8px 0
          .brand
            display: inline-block
            vertical-align top
            width: 30px
            height: 18px
            bg-img("brand")
            background-size: 30px 18px
            background-repeat: no-repeat
          .name
            margin-left: 6px
            font-size: 16px
            line-height: 18px
            font-weight:bold
        .description
          margin-bottom: 10px
          line-height: 12px
          font-size: 12px
        .support
          .icon
            display: inline-block
            width: 12px
            height: 12px
            margin-right 4px
            background-size 12px 12px
            background-repeat: no-repeat
            &.decrease
              bg-img("decrease_1")
            &.discount
              bg-img("discount_1")
            &.guarantee
               bg-img("guarantee_1")
            &.invoice
              bg-img("invoice_1")
            &.special
              bg-img("special_1")
          .text
            line-height: 12px
            font-size: 12px

</style>

5.js内容如下

<script type="text/ecmascript-6">
  export default {
      //用props去接收从App.vue传入过来的seller数据
    props: {
      seller: {
        type: Object
      }
    },
    created() {
      this.classMap = ['decrease','discount','special','invoice','guarantee']
    }
  }
</script>

6.针对于style中多出来的样式，主要是针对于bg-img做了处理，代码写在了mixin.styl中

@import "./base"
border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color

bg-img($url)
  background-image: url($url + '@2x.png')
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3)
    background-image: url($url + '@3x.png')

7.mixin.styl中引入的base代码是在同级目录下创建的一个基本样式，内容如下（base.styl）

body, html
  line-height: 1
  font-weight: 200
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', Arial, sans-serif