06-项目实战-header组件开发

6-1 Vue-resource应用（上）

vue-resource：https://github.com/pagekit/vue-resource

/* package.json */
"dependencies": {
  "vue-resource": "^1.0.1"
}

/* main.js */
import VueResource from 'vue-resource'

Vue.use(VueResource)

6-2 Vue-resource应用（下）

/* App.vue */
const ERR_OK = 0

export default {
  data () {
    return {
      seller: {}
    }
  },
  created () {
    this.$http.get('/api/seller').then((response) => {
      response = response.body
      if (response.errno === ERR_OK) {
        this.seller = response.data
      }
    })
  },
}

6-3 外部组件（1）

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

<!-- header.vue -->
<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar">
      </div>
      <div class="content">
        <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"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
    </div>
    <div class="bulletin-wrapper"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      seller: {
        type: Object
      }
    }
  }
</script>

6-4 外部组件（2）

/* mixin.styl */
bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-retio: 3),(min-device-pixel-retio: 3)
    background-image url($url + "@3x.png")

通过@import引入CSS库不能使用alias，只有通过import引入JS库才能使用alias

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"

  .header
    color #ffffff
    background #000000
    .content-wrapper
      padding 24px 12px 18px 24px
      font-size 0
      .avatar
        display inline-block
      .content
        display inline-block
        margin-left 16px
        font-size 14px
        .title
          margin 2px 0 8px 0
          .brand
            display inline-block
            vertical-align top // 垂直顶部对齐
            width 30px
            height 18px
            bg-image('brand')
            background-size 30px 18px
            background-repeat no-repeat
          .name
            margin-left 6px
            font-size 16px
            line-height 18px
            font-weight bold // 字体加粗
</style>

/* base.styl */
body, html
  line-height 1
  font-weight 200
  font-family "PingFang SC", "STHeitiSC-Light", "Helvetica-Light", "Arial", "SansSerif"

6-5 外部组件（3）

活动图标

<span class="icon" :class="classMap[seller.supports[0].type]"></span>

created () {
  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
}

6-6 外部组件（4）

活动内容

<div v-if="seller.supports" class="support-count">
  <span class="count">{{seller.supports.length}}个</span>
  <i class="icon-keyboard_arrow_right"></i>
</div>

6-7 外部组件（5）

公告

<div class="bulletin-wrapper">
  <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
  <i class="icon-keyboard_arrow_right"></i>
</div>

文字内容超过部分则使用”…”表示

white-space nowrap
overflow hidden
text-overflow ellipsis

6-8 外部组件（6）

背景图

<div class="background">
  <img :src="seller.avatar" width="100%" height="100%">
</div>

.background
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  z-index -1
  filter blur(10px) // 滤镜产生模糊效果

6-9 详情弹层页（1）- 实现弹出层

<div v-show="detailShow" class="detail"></div>

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

data () {
  return {
    detailShow: false
  }
},
methods: {
  fnShowDetail () {
    this.detailShow = true
  }
}

6-10 详情弹层页（2）- CSS Sticky footer

CSS秘密花园： Sticky footers

// base.styl
.clearfix
  display inline-block
  &:after
    display block
    content "."
    height 0
    line-height 0
    clear both
    visibility hidden

<div v-show="detailShow" class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></i>
  </div>
</div>

.detail-wrapper
  width 100%
  min-height 100%
  .detail-main
    margin-top 64px
    padding-bottom 64px
.detail-close
  position relative
  width 32px
  height  32px
  margin -64px auto 0 auto
  clear both
  font-size 32px

6-11 详情弹层页（3）- star组件抽象（上）

6-12 详情弹层页（3）- star组件抽象（下）

6-13 详情弹层页（4）- star组件使用

6-14 详情弹层页（5）- 小标题自适应经典flex布局实现

6-15 详情弹层页（6）- header剩余组件实现（上）

6-16 详情弹层页（6）- header剩余组件实现（下）