vue2.0 之 douban （三）创建header组件

1.分析

首页的header背景是绿色的，并且有一个搜索框，其他页面都是灰色的背景，在header的左侧，是一个返回按钮，右侧，有分享或者评论等图标，中间就是header的标题。我们先不做有搜索框的header。

我们先在components文件中创建一个header.vue文件，并且在less文件里新建一个颜色变量var.less（统一管理app的颜色，保持统一），我们先将有其他元素的组件的大致框架，以及样式先写出来。然后在Index.vue里面引入。

var.less

//APP默认颜色
@defaultColor:#42bd56;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

header.vue

<template>
  <header class="m-header is-bg is-fixed" >
    <div class="m-header-button is-left">
      <a href="javascript:;"><img class="m-icon-img" src="../assets/images/ic_bar_back_white.png"/>返回</a>
    </div>

    <h1 class="m-header-title">豆瓣app</h1>

    <div class="m-header-button is-right">
      <a href="javascript:;">分享</a>
    </div>
  </header>
</template>
<script>

</script>
<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background: #fff;
  color: @headerDefaultColor;
  border-bottom:1px solid #eee;
  a{
    color: @headerDefaultColor;
  }
  .m-header-button{
    width: 70px;
    align-items:stretch;
    &.is-left{
      text-align: left;
    }
    &.is-right{
      text-align: right;
    }
    .m-icon-img{
      width: 20px;
      height: 20px;
    }
    .margin-right-10{
      margin-right: 10px;
    }
  }
  .m-header-title{
    flex: 1;
    text-align: center;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &.is-bg{
    background:@headerBg;
    color: #fff;
    a{color: #fff;}
    .m-header-title{
      color: #fff;
    }
  }
  &.is-fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
}
</style>

Index.vue 引入

效果图：

2.接下来我们就来把header改造成可以配置属性的组件，可以传递props(title,fixed,bg)

header.vue

<template>
  <header class="m-header" :class="{'is-bg':bg,'is-fixed':fixed}">
    <div class="m-header-button is-left">
      <slot name="left"></slot>
    </div>

    <h1 class="m-header-title" v-text="title"></h1>

    <div class="m-header-button is-right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<script>
  export default{
    props:{
      title:{
        type:String,
        default:''
      },
      bg:{
        type:Boolean,
        default:false
      },
      fixed:{
        type:Boolean,
        default:false
      }
    }
  }
</script>

<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background: #fff;
  color: @headerDefaultColor;
  border-bottom:1px solid #eee;
  a{
    color: @headerDefaultColor;
  }
  .m-header-button{
    width: 70px;
    align-items:stretch;
    &.is-left{
      text-align: left;
    }
    &.is-right{
      text-align: right;
    }
    .m-icon-img{
      width: 20px;
      height: 20px;
    }
    .margin-right-10{
      margin-right: 10px;
    }
  }
  .m-header-title{
    flex: 1;
    text-align: center;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &.is-bg{
    background:@headerBg;
    color: #fff;
    a{color: #fff;}
    .m-header-title{
      color: #fff;
    }
  }
  &.is-fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
}
</style>

3.改造tabbar,完成路由跳转

我们先新建底部tabbar的路由页面，豆瓣app这个项目说大不大说小也不小，为了规划好结构，我们将每一个路由都新建一个文件夹，然后在文件夹里面，新建这个页面。在每个页面都添加不同的header组件，如图所示：

然后在每一个路由页面里面，我们都添加上header组件.

Index.vue

<template>
  <div>
    <m-header title="豆瓣app" fixed :bg="true">
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

AudioBook.vue

<template>
  <div>
    <m-header title="书影音" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

Broadcast.vue

<template>
  <div>
    <m-header title="广播" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

Group.vue

<template>
  <div>
    <m-header title="小组" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

Mine.vue

<template>
  <div>
    <m-header title="我的" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

路由的页面完成后我们就需要在router文件夹下面的index.js里面，来配置页面路由。如下：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index/Index'
import Broadcast from '../pages/Broadcast/Broadcast'
import AudioBook from '../pages/AudioBook/AudioBook'
import Group from '../pages/Group/Group'
import Mine from '../pages/Mine/Mine'

Vue.use(Router)

// 路由配置
export default new Router({
  routes: [
    // 默认首页
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    // 广播
    {
      path: '/broadcast',
      name: 'Broadcast',
      component: Broadcast
    },
    // 书影音
    {
      path: '/audioBook',
      name: 'AudioBook',
      component: AudioBook
    },
    // 小组
    {
      path: '/group',
      name: 'Group',
      component: Group
    },
    // 我的
    {
      path: '/mine',
      name: 'Mine',
      component: Mine
    },
    {
      path: '/Index',
      redirect: '/'
    },
    {
      path: '*',
      redirect: '/'
    },
  ]
})

接下来我们就来改造tabbar实现路由跳转。我们先将index.vue里的tabbar组件移入到app.vue里面，并且将每一个id改成对应的路由，添加一个isRouter属性，来判断当前item是否是路由跳转。然后在tabbar-item.vue里我们在props添加isRouter，click点击跳转的方法放到methods里面，并且根据传递的isRouter判断当前是否通过路由跳转

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <m-tabbar v-model="select">
     <m-tabbar-item id='Index' isRouter>
        <img src="./assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">
        <img src="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active">
        首页
      </m-tabbar-item>
      <m-tabbar-item id='AudioBook' isRouter>
        <img src="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal">
        <img src="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active">
        书影音
      </m-tabbar-item>
      <m-tabbar-item id='Broadcast' isRouter>
        <img src="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal">
        <img src="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active">
        广播
      </m-tabbar-item>
      <m-tabbar-item id='Group' isRouter>
        <img src="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal">
        <img src="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active">
        小组
      </m-tabbar-item>
       <m-tabbar-item id='Mine' isRouter>
        <img src="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal">
        <img src="./assets/images/ic_tab_profile_active.png" alt="" slot="icon-active">
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
import mTabbar from './components/tabbar'
import mTabbarItem from './components/tabbar-item'
export default {
  name: 'app',
  components:{
    mTabbar,
    mTabbarItem
  },
  data() {
    return {
      select:"Index"
    }
  }
}
</script>

<style>

</style>

tabbar-item.vue

<template>
  <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter">
    <span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>
    <span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>
    <span class="m-tabbar-item-text"><slot></slot></span>
  </a>
</template>
<script>
  export default{
    props: {
      id:{
        type:String
      },
      isRouter:{
        type:Boolean,
        default:false
      }
    },
    computed: {
      isActive(){
        if(this.$parent.value===this.id){
          return true;
        }
      }
    },
    methods:{
      goToRouter(){
        this.$parent.$emit('input',this.id)
        //判断是否为路由跳转
        if(this.isRouter){
          //根据id跳转到对应的路由页面
          this.$router.push(this.id)
        }
      }
    }
  }
</script>
<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
  flex: 1;
  text-align: center;
  .m-tabbar-item-icon{
    display: block;
    padding-top: 2px;
    img{
      width: 28px;
      height: 28px;
    }

  }
  .m-tabbar-item-text{
    display: block;
    font-size: 10px;
    color:#949494;
  }
  &.is-active{
    .m-tabbar-item-text{
      color: @tabbarActiveColor;
    }
  }
}
</style>

tabbar.vue

通过计算返回当前路由的值

<template>
  <div class="m-tabbar">
    <slot></slot>
  </div>
</template>
<script>
  import mTabbarItem from './tabbar-item';
  export default {
    computed:{
      value(){
        return this.$route.matched[0].name
      }
    }
  }
</script>
<style lang="less">
.m-tabbar{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  height: 50px;
  background: #fff;
  border-top: 1px solid #e4e4e4;
}
</style>

效果图