vue 自定義元件tabbar

tabbar的封裝 當然方法也很多,懶得寫了直接貼程式碼吧

<template>
  <div id="table-bar" class="border-top-1px">
    <div class="items" @click='switchTab("Home")'
      :class="$route.path.indexOf('Home') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Home') !== -1" 
          src="../images/icon_shouye.png" alt='active'/>
        <img v-else src="../images/icon_shouye2.png" alt="normal">
      </div>
      <div class="text">
        首頁
      </div>
    </div>
    <div class="items" @click='switchTab("Order")'
      :class="$route.path.indexOf('Order') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Order') !== -1" 
          src="../images/icon_dingdan.png" alt='active'>
        <img v-else src="../images/icon_dingdan2.png" alt="normal">
      </div>
      <div class="text">
        訂單
      </div>
    </div>
    <div class="items" @click='switchTab("Mine")'
      :class="$route.path.indexOf('Mine') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Mine') !== -1" 
          src="../images/icon_me2.png" alt="active">
        <img v-else src="../images/icon_me.png" alt="normal">
      </div>
      <div class="text">
        我的
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TableBar",
  data(){
    return {

    }
  },
  methods: {
    switchTab(path) {
      this.$router.replace(path)
    }
  },
  mounted() {
    
  },
}
</script>
<style lang='less' scoped>
  @import '../styles/mixin.less';
  @import '../styles/base.less';
  #table-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.5rem;
  }
  .items{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: @subtitle-color;
    font-size: 0.11rem;
  }
  .text{
    font-size: 0.11rem;

  }
  .icon{
    width: 0.22rem;
    height: 0.22rem;
    overflow: hidden;
    margin-bottom: 0.03rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .active{
    color: @title-color;
  }
</style>