vue.js移动端tab组件的封装实践实例

tabbar的封装

<template>
 <div class="m-tabbar">
  <slot></slot>
 </div>
</template>
<script type="text/ecmascript-6">
 export default {}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
 .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>

最后在我们的app.vue里面引用tabbar组件，监听子类tabbaritem的点击方法，来控制当前哪个item的选中颜色文字的改变

app.vue代码

<template>
 <div id="app">
  <router-view></router-view>
  <m-tabbar @tabbarActionEvent='changeSelectedValue'>
   <m-tabbar-item id='Home' :isRouter="isHome">
    ![](./assets/tabbar-home-normal@2x.png)
    ![](./assets/tabbar-home-selected@2x.png)
    首页
   </m-tabbar-item>
   <m-tabbar-item id='Position' :isRouter="isPosition">
    ![](./assets/tabbar-position-normal@2x.png)
    ![](./assets/tabbar-position-selected@2x.png)
    职位
   </m-tabbar-item>
   <m-tabbar-item id='Message' :isRouter="isMessage">
    ![](./assets/tabbar-message-normal@2x.png)
    ![](./assets/tabbar-message-selected@2x.png)
    消息
   </m-tabbar-item>
   <m-tabbar-item id='Me' :isRouter="isMe">
    ![](./assets/tabbar-me-normal@2x.png)
    ![](./assets/tabbar-me-selected@2x.png)
    我
   </m-tabbar-item>
  </m-tabbar>
 </div>
</template>
<script>
 import mTabbar from 'common/tab/tab.vue'
 import mTabbarItem from 'common/tab/tabbar-item'
 export default {
  name: 'app',
  components: {
   mTabbar,
   mTabbarItem
  },
  data () {
   return {
    isHome: true,
    isPosition: false,
    isMessage: false,
    isMe: false
   }
  },
  methods: {
   changeSelectedValue: function (elValue) {
    if (elValue === 'Home') {
     this.isHome = true
    } else {
     this.isHome = false
    }
    if (elValue === 'Position') {
     this.isPosition = true
    } else {
     this.isPosition = false
    }
    if (elValue === 'Message') {
     this.isMessage = true
    } else {
     this.isMessage = false
    }
    if (elValue === 'Me') {
     this.isMe = true
    } else {
     this.isMe = false
    }
   }
  }
 }
</script>

自此tababr已经封装完毕了，其中用到的tabbaritem图片，大家可以自己替换掉，下一篇，会提到导航部分的封装