<template>
  <div class="tabBar">
    <tabbar @on-index-change="onChange">
      <tabbar-item v-for="(item, index) in tabList" :key="index" :selected="item.selected" :badge="item.num" :link="item.link">
        <img slot="icon" :src="item.imgUrl">
        <span slot="label">{{item.name}}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>
<script>
  /*
    底部导航栏组件
    tablist: {
      num: 消息标记数量，传空值则没有标记,
      link: 跳转页面链接,
      imgUrl: 导航图标,
      name: 导航名称
      selected: 是否选中当前项
    }
    onChange：底部导航选中改变时的回调
  */
  import { Tabbar, TabbarItem } from 'vux'
  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    props: ['tabList'],
    data () {
      return {}
    },
    methods: {
      onChange (index) {
        this.$emit('on-change', index)
      }
    }
  };
</script>
<style lang="less">
.tabBar {
  .weui-tabbar__icon {
    position: relative;
    .vux-badge-single {
      width: auto;
      min-width: 16px;
    }
  }
  .weui-tabbar__icon > sup {
    position: absolute;
    top: 0;
    left: 35px;
    transform: translateX(-50%);
    z-index: 101;
  }
  .weui-tabbar__item.vux-tabbar-simple {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
  }
  .vux-tabbar-simple .weui-tabbar__label {
    font-size: 14px;
    line-height: 50px;
  }
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #89A9CF;
  }
}
  
</style>