vue h5移动端封装tabBar组件

<template>
  <div class="tabberWarp">
    <div class="warp">
      <div
        class="itemWarp flex_mid"
        v-for='(item, index) in tabbarDes'
        :key="index"
        @click="getVal(item)"
      >
        <img :src="item.page === $route.path ? item.activeImg : item.normalImg" alt="" />
        <p :class="['font', {color: item.page === $route.path}]">{{item.txt}}</p>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      selected: 'index',
      tabbarDes: [
        {
          txt: '立即查询',
          page: '/index',
          normalImg: 'http://xxx.com/ncov/icon/foot/chaxun1.png',
          activeImg: 'http://xxx.com/ncov/icon/foot/chaxun2.png'
        },
        {
          txt: '全部信息',
          page: '/Info',
          normalImg: 'http://xxx.com/ncov/icon/foot/quanbu1.png',
          activeImg: 'http://xxx.com/ncov/icon/foot/quanbu2.png'
        },
        {
          txt: '意见反馈',
          page: '/opinion',
          normalImg: 'http://xxx.com/ncov/icon/foot/fankui1.png',
          activeImg: 'http://xxx.com/ncov/icon/foot/fankui2.png'
        },
        {
          txt: '技术支持',
          page: '/aboutAs',
          normalImg: 'http://xxx.com/ncov/icon/foot/guanyu1.png',
          activeImg: 'http://xxx.com/ncov//icon/foot/guanyu2.png'
        }
      ]
    }
  },
  methods: {
    getVal (res) {
      console.log(this.$route.path)
      this.selected = res.page
      this.$router.push(res.page)
    }
  }
}
</script>
<style lang="less">
.warp {
  width: 100%;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0;
  .itemWarp {
    text-align: center;
    .font {
      font-size: 12px;
      &.color {
        color: #6076FF;
      }
    }
  }
}
.warp img {
  width: 20px;
  height: 20px;
}
.tabberWarp img {
  margin-top: 10px;
  margin-bottom: 5px;
}
.tabberWarp {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 5px;
  background: #fff;
}
</style>